datatables实现分页

最新推荐文章于 2025-07-01 14:21:23 发布

神影天初

最新推荐文章于 2025-07-01 14:21:23 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： datatables 文章标签： datatables 分页

本文链接：https://blog.youkuaiyun.com/qq_35134066/article/details/90223231

datatables 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何使用datatables实现服务端分页。在初始化时，通过设置ajax参数，当对表格进行操作时，会发送'/loadData'的POST请求，携带相关参数如排序方式、页面容量和起始位置给后台。后台接收到请求后，根据参数对数据进行处理并返回相应分页数据。页面展示时，无论是更改页面容量还是点击页码，都会自动触发新的分页请求，实现动态加载和切换页面。

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

datatables实现分页分为客户端分页和服务端分页两种，客户端分页很简单，只要把返回的所有数据根据dataSrc设置好就可以了。

这里说一下服务端分页的实现。

html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试datatable</title>
    <link rel="stylesheet" href="./lib/datatables/media/css/jquery.dataTables.css">
</head>

<body>
    <div class="table-responsive">
        <table id="example">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>生日</th>
                    <th>邮箱</th>
                    <th>薪水</th>
                </tr>
            </thead>
        </table>
    </div>
</body>
<script src="./lib/jquery/dist/jquery.js"></script>
<script src="./lib/datatables/media/js/jquery.dataTables.js"></script>
<script src="./app/app.js"></script>

</html>

app.js

var table;
$(function () {
    table = $("#example").DataTable({
        serverSide: true,
        ajax: {
            url: '/loadData',
            type: 'post',
            dataSrc: function (result) {
                if (result.data) {
                    return result.data;
                } else {
                    return result.demo;
                }
            }
        },
        columns: [{
                data: "name",
                defaultContent: "",
                render: $.fn.dataTable.render.text()
            },
            {
                data: "birthday",
                defaultContent: "",
                render: {
                    _: "display",
                    sort: "timestamp"
                }
            },
            {
                data: "email",
                defaultContent: "",
                render: function (data, type, row) {
                    if (type == "display") {
                        return data;
                    }
                    if (type == "sort") {
                        return row.birthday.timestamp;
                    }
                    return data;
                }
            },
            {
                data: "salary",
                defaultContent: "",
                render: $.fn.dataTable.render.number(',', '.', 2, '$', '美元')
            }
        ],
        select: true,
        deferRender: true,
        pageLength: 2,
        lengthMenu: [2, 3, 5],
        processing: true
    })
})

在初始化datatable时设置ajax参数会在对表格进行操作后发送"/loadData"的post请求，并自动发送一些数据到后台

看控制台的Headers：发送/loadData请求，后台需要注意的参数就是

这几个属性，order[0][colume]: 0说明数据是按照表格第一列进行排序的，order[0][dir]: asc，说明数据是升序排序。

length: 2指当前页面容量是2，也就是最多2条数据，start: 0与length: 2进行计算(start / length) + 1得1说明请求的是第一页数据，

也就是告诉后台将所有数据按第一列（name）进行升序排列然后给出第一页的至多两条数据。

后台给出的数据格式为（在Headers旁边Preview中查看）：其中iTotalDisplayRecords和iTotalRecords可以看做是表格的所有数据量，demo是数据数组，默认是data或aaData，可以向app.js中的dataSrc一样自定义设置数据集。

数组里面的对象格式大致是这样：

{
    "name": "alice",
    "birthday": {
        "display": "Tue May 10 1994",
        "timestamp": "768499200000"
    },
    "email": "111@111.com",
    "salary": "1100"
}