datatables实现分页

柔光的暖阳◎ 2022-01-30 22:37 440阅读 0赞

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请求，后台需要注意的参数就是![20190515011021692.png][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70 1][]

后台给出的数据格式为（在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"
    }

![20190515012003164.png][]

成功初始化后的页面为：这里我只是简单把数据进行分页并没有进行排序操作

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70 2][]

接下来无论是点击左上角改变表格页面容量 ，还是点击右下角的页码都会发送"/loadData"请求，区别就是传递的参数不同。

接下来查看点击页码2发起的请求：可以看到start：2，length：2，计算（start / length）+ 1得2，所以获取第二页的最多两条数据。

![20190515012901636.png][]

页面结果为：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70 3][] 这样分页的功能就实现了。

[20190515011021692.png]: /images/20220131/488c9058654a43edb1d219b4c83f2263.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70]: /images/20220131/37d04e26599e423e9f2a2ef02d838c91.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70 1]: /images/20220131/0b3a4bf5da7f4380bcd3f83aad3face2.png
[20190515012003164.png]: /images/20220131/6c91035fda9b44969ae34d0f33e1dde9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70 2]: /images/20220131/92507a338b504af7989209d546a85b46.png
[20190515012901636.png]: /images/20220131/7c655aec53734cd2af50f33589e40925.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70 3]: /images/20220131/b245ff8265f64cf282e944848635a141.png