jquery DataTable实现前后台动态分页

下面是jquery DataTable实现前后台动态分页的攻略。

1. DataTable介绍

jQuery DataTable是一个功能强大的插件，它能够将静态的HTML表格转换成功能丰富、交互性强大并且具备搜索、排序和分页功能的表格。它是一个集成了全部必要功能的插件，还具有较高的扩展性，可以轻松地应对不同需求。

2. jQuery DataTable动态分页的实现

数据量较大时，一定要使用后台分页。使用 DataTable 实现后台分页，需要前端发送分页请求到后端，通过后端获取数据之后，把数据以 JSON 格式返回到前端，并根据后端返回的数据的数量来计算出分页数量，从而实现前端分页。以下是前后台动态分页实现的步骤：

2.1 前端配置

引入 jQuery 和 DataTable 的相关文件：

<!--引入jQuery-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--引入datatables的css文件-->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css">
<!--引入datatables的js文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>

创建表格

<table id="table_id">
    <thead>
        <tr>
            <th>列1</th>
            <th>列2</th>
            .
            .
            .
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

设置DataTable属性

$(document).ready( function () {
    var table = $('#table_id').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "后台接口地址",
            "type": "POST",
            "data": function(d) {
                d.start = d.start || 0;
                d.limit = d.length || 10;
                return d;
            },
            "dataType": "json"
        },
        "columns": [
            { "data": "列名" },
            { "data": "列名" },
            .
            .
            .
        ]
    });
});

该属性配置了：

processing：是否开启加载提示
serverSide：是否开启服务端分页
ajax：获取数据的接口地址
data：向后端发送的数据
columns：列配置

2.2 后端实现

针对 DataTable 发送的延迟加载请求进行响应，将分页数据以 json 格式返回到前端。需要注意的是，接口返回的数据需要包含以下的 key 值：

recordsTotal：总数据条数
recordsFiltered：过滤后的数据条数
draw：请求序号，原样返回

以下是具体实现的示例代码：

router.post('/data', async function(ctx, next) {
    const { start, limit } = ctx.request.body
    const currentPage = start / limit + 1
    const data = await getData(currentPage, limit)
    const totalCount = await getTotalCount()
    ctx.body = {
      draw: ctx.request.body.draw || 1,
      recordsTotal: totalCount,
      recordsFiltered: totalCount,
      data,
    }
})

在该代码中，getData() 方法是用于获取分页数据的方法，getTotalCount() 方法是用于获取数据总条数的方法，ctx.request.body 则是从前端获取的数据。

2.3 总结

至此，jQuery DataTable前后台动态分页的实现就完成了。前端在需要分页的时候，会从后端获取数据，然后通过 DataTable 显示到表格中，可以在 DataTable 中自主切换页码。

3. 示例说明

以下两个示例对数据进行了模拟，演示了前后台分页实现效果。

3.1 示例1

假设有如下的服务器端数据：

[
    {
        "name": "张三",
        "age": 25,
        "gender": "男"
    },
    {
        "name": "李四",
        "age": 30,
        "gender": "女"
    },
    {
        "name": "王五",
        "age": 28,
        "gender": "男"
    },
    {
        "name": "赵六",
        "age": 24,
        "gender": "女"
    },
    {
        "name": "陈七",
        "age": 26,
        "gender": "男"
    },
    {
        "name": "高八",
        "age": 29,
        "gender": "女"
    }
]

在前端页面设置如下的 DataTable 配置：

$('#example').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "/api/getData",
        "type": "POST",
        "data": function(d) {
            d.start = d.start || 0;
            d.limit = d.length || 10;
            return d;
        },
        "dataType": "json"
    },
    "columns": [
        { "data": "name" },
        { "data": "age" },
        { "data": "gender" }
    ]
});

在请求 /api/getData 接口时，后台会返回第 1 页的数据，而 DataTable 插件会自动地在表格底部生成分页按钮，供用户切换分页显示。

3.2 示例2

在这个示例中，我们假设后台只返回 50 条假数据，前端每次从服务器请求 10 条，前端的代码如下：

$('#example').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "/api/getData",
        "type": "POST",
        "data": function(d) {
            d.start = d.start || 0;
            d.limit = d.length || 10;
            return d;
        },
        "dataType": "json"
    },
    "columns": [
        { "data": "id" },
        { "data": "name" },
        { "data": "city" }
    ],
    "language": {
        "lengthMenu": "每页显示 _MENU_ 条记录",
        "zeroRecords": "没有匹配的结果",
        "info": "第 _PAGE_ 页，共 _PAGES_ 页，共 _TOTAL_ 条记录",
        "infoEmpty": "没有记录",
        "infoFiltered": "(从 _MAX_ 条记录中过滤)",
        "oPaginate": {
            "sFirst": "第一页",
            "sLast": "最后一页",
            "sNext": "下一页",
            "sPrevious": "上一页"
        }
    }
});

在请求 api/getData 接口时，依然会返回第 1 页的数据，但是前端会自动选取每页显示 10 条数据，并且在底部显示 Total：50 和 Pages：5 信息。用户可以点击底部的分页按钮切换，DataTable 插件依据用户的操作，请求相应的页数据显示。

至此，本文介绍了 JQuery DataTable 实现前后台动态分页的完整攻略，以及具体的示例说明。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery DataTable实现前后台动态分页 - Python技术站