版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>昵称</th>
<th>第二昵称</th>
<th>余额</th>
<th>类型</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
<script>
$(document).ready(function () {
$('#example').DataTable( {
"processing": true, //是否显示处理状态
"serverSide": true, ////启用服务器端分页
"pageLength" : 2, //改变初始化页长度（每页多少条数据）
"ajax": { //ajax请求
"url": "https://health.vilson.xyz/api/user/list", //请求地址
"type": "POST", //请求方式
"data": {"token": 123} //额外的参数
},
"columns": [ //跟你要显示的字段是一一对应的。
{ "data": "nickname" },
{ "data": "hx_nickname" },
{ "data": "rank_money" },
{ "data": "user_type" },
]
} );
});
</script>
</html>
后端返回的格式
"data": [{
"nickname": "钱生",
"hx_nickname": "hx_钱生",
"rank_money": "0.00",
"user_type": "routine"
}, {"nickname": "王涵阳",
"hx_nickname": null,
"rank_money": "0.00",
"user_type": "routine"
}],
"draw": "1", // 这个参数需要 特别注意 ，draw 标识当前的绘制，服务端在接收到这个参数后，需要将这个参数返回，必须返回，而后客服端重新绘制表格后，这个参数会 + 1 ，表示已更新。
"recordsTotal": 10, //这个参数也特别重要，标识了全部数量，有这个参数，客户端才能确定分成多少页
"recordsFiltered": 10 //过滤查询后的数量