JQuery DataTables 服务端分页的实现

最新推荐文章于 2025-04-02 22:09:45 发布

545522390

最新推荐文章于 2025-04-02 22:09:45 发布

阅读量227

点赞数

本文链接：https://blog.youkuaiyun.com/u013239476/article/details/102679595

版权

本文介绍了一种使用HTML、CSS、JavaScript和jQuery DataTables插件实现用户列表展示的方法，包括从服务器动态加载数据、分页显示及处理状态提示等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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 //过滤查询后的数量