无需多言，代码如下，仅供参考：
（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() {
vartable = $('#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() {
vardata = 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>