无需多言,代码如下,仅供参考:
- 本地化语言提示;
- 排序支持;
- 搜索支持;
- 数据动态分页获取。
<!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>