无需多言,代码如下,仅供参考:

  1. 本地化语言提示;
  2. 排序支持;
  3. 搜索支持;
  4. 数据动态分页获取。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<title>DataTables演示</title>

<link rel="stylesheet" type="text/css"

href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">

<style type="text/css" class="init"></style>

<script type="text/javascript" language="javascript"

src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script type="text/javascript" language="javascript"

src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<script type="text/javascript" class="init">

$(document).ready(function() {

var table = $('#example').DataTable( {

    //"searching": false,

    "processing": true,

    "serverSide": true,

    "ajax": 'DataTablesDemoData.api',

    "language": {

    "lengthMenu": "每页显示 _MENU_ 条记录",

    "zeroRecords": "无可用数据",

    "info": "第 _PAGE_ / _PAGES_ 页",

    "infoEmpty": "无可用数据",

    "infoFiltered": "(筛选于 _MAX_ 条记录)",

    "loadingRecords": "加载中...",

    "processing":     "处理中...",

    "search":         "搜索:",

    "paginate": {

    "first":      "首页",

    "last":       "尾页",

    "next":       "下一页",

    "previous":   "上一页"

    },

    },

    "columnDefs": [ {

            "targets": -1,

            "data": null,

            "defaultContent": "<button>点我!</button>"

        } ]

    } );

 

    $('#example tbody').on( 'click', 'button', function () {

        var data = table.row( $(this).parents('tr') ).data();

        alert("序号:"+ data[ 0 ]+"\n标识:"+ data[ 1 ]+"\n版本:"+ data[ 2 ] );

    } );

} );

</script>

</head>

<body class="wide comments example">

<table id="example" class="display" cellspacing="0" width="100%">

        <thead>

            <tr>

                <th>序号</th>

                <th>标识</th>

                <th>版本</th>

                <th>操作</th>

            </tr>

        </thead>

        <tfoot>

            <tr>

                <th>序号</th>

                <th>标识</th>

                <th>版本</th>

                <th>操作</th>

            </tr>

        </tfoot>

    </table>

</body>

</html>