datatables后端分页

0x01 缘由

平时较少涉及前端，这次本以为模板中有表单，分页跳转搜索功能都比较齐全，可以高枕无忧，但是细看模板中的分页跳转是不需要与后台交互的，数据一次性写在前端，再有前端插件完成分页。

这种方式肯定是不可行的，这次要做的可以看做资产管理，服务器+主机量级很大，一个机器生成一条 <th>，第一次请求的前端代码怕是要崩掉。

所以合理采用的还是后端分页

0x02 分页方式

团队项目里看过的几种后端分页方式：

1. Paginator + render渲染整个页面，这种方式比较好理解，但是每一次跳转分页，都会替换掉整块main-content部分。

2. datatables 后端分页，这种方式按照datatables提供的API填写相关信息与逻辑，缺点是

　　1) 受限于这种插件的条条框框，要自定义一些内容有点麻烦。

　　　　比如原始datatables中search是实时的，即在search input框中输入 "123"，会进行 "1"、"12"、"123"三次过滤，在后端分页中，就会发起三次查询。

　　　　所以要自定义搜索，但是form部分是由datatables初始化过程中生成的，找半天没有找到插入自定义<input>框的接口。所以用jquery遍历再添加 <input>。

　　2) 文档不太清晰

　　　　各种API、接口，在文档中找来找去挺麻烦的。等到整块写的差不多的时候，才意外看到官方后端分页的文档。

3. 自己编写form、跳转、查询、排序、每页数量等功能，就是稍显麻烦，但还是挺灵活的。

0x03 datatables后端分页流程

由于模板本身的表单是基于datatables的，所以最后还是修改了datatables。

datatables后端分页的流程大概可以分为四部分：

1. 修改datatables的初始化参数，改为后端分页，并修改其他设置

2. datatables传递数据给服务端

3. 接收服务端数据，比如说取到第10页的10条json数据

4. 数据渲染至datatables当前页面

0x04 修改datatables初始化参数

<script type="text/javascript">

    $(function () {

        //提示信息

        var lang = {

            "sProcessing": "处理中...",

            "sLengthMenu": "每页 _MENU_ 项",

            "sZeroRecords": "没有匹配结果",

            "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",

            "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",

            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",

            "sInfoPostFix": "",

            "sSearch": "搜索:",

            "sUrl": "",

            "sEmptyTable": "表中数据为空",

            "sLoadingRecords": "载入中...",

            "sInfoThousands": ",",

            "oPaginate": {

                "sFirst": "首页",

                "sPrevious": "上页",

                "sNext": "下页",

                "sLast": "末页",

                "sJump": "跳转"

            },

            "oAria": {

                "sSortAscending": ": 以升序排列此列",

                "sSortDescending": ": 以降序排列此列"

            }

        };

        //初始化表格

        var table = $("#dynamic-table").dataTable({

            language:lang,  //提示信息

            autoWidth: false,  //禁用自动调整列宽

            stripeClasses: ["odd", "even"],  //为奇偶行加上样式，兼容不支持CSS伪类的场合

            processing: true,  //隐藏加载提示,自行处理

            serverSide: true,  //启用服务器端分页

            searching: false,  //禁用原生搜索

            orderMulti: false,  //启用多列排序

            order: [],  //取消默认排序查询,否则复选框一列会出现小箭头

            renderer: "bootstrap",  //渲染样式：Bootstrap和jquery-ui

            pagingType: "simple_numbers",  //分页样式：simple,simple_numbers,full,full_numbers

            columnDefs: [{

                "targets": 'nosort',  //列的样式名

                "orderable": false    //包含上样式名‘nosort’的禁止排序

            }]

        }).api();//此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象

    });

</script>

datatables初始化中，以字典的形式将初始化信息传递进去。

其中，language为表单的一些提示信息。这里比较简单，基本上看看就明白。

所以，现在表单已经初始化成了后端模式了。

接下来，怎么给后端传递数据

0x05 前后端数据交互

需要增加的两个值：ajax 与 column

<script type="text/javascript">

    $(function () {

        //提示信息

        var lang = {

            "sProcessing": "处理中...",

            "sLengthMenu": "每页 _MENU_ 项",

            "sZeroRecords": "没有匹配结果",

            "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",

            "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",

            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",

            "sInfoPostFix": "",

            "sSearch": "搜索:",

            "sUrl": "",

            "sEmptyTable": "表中数据为空",

            "sLoadingRecords": "载入中...",

            "sInfoThousands": ",",

            "oPaginate": {

                "sFirst": "首页",

                "sPrevious": "上页",

                "sNext": "下页",

                "sLast": "末页",

                "sJump": "跳转"

            },

            "oAria": {

                "sSortAscending": ": 以升序排列此列",

                "sSortDescending": ": 以降序排列此列"

            }

        };

        //初始化表格

        var table = $("#dynamic-table").dataTable({

            language:lang,  //提示信息

            autoWidth: false,  //禁用自动调整列宽

            stripeClasses: ["odd", "even"],  //为奇偶行加上样式，兼容不支持CSS伪类的场合

            processing: true,  //隐藏加载提示,自行处理

            serverSide: true,  //启用服务器端分页

            searching: false,  //禁用原生搜索

            orderMulti: false,  //启用多列排序

            order: [],  //取消默认排序查询,否则复选框一列会出现小箭头

            renderer: "bootstrap",  //渲染样式：Bootstrap和jquery-ui

            pagingType: "simple_numbers",  //分页样式：simple,simple_numbers,full,full_numbers

            columnDefs: [{

                "targets": 'nosort',  //列的样式名

                "orderable": false    //包含上样式名‘nosort’的禁止排序

            }],

            ajax: function (data, callback, settings) {

                //封装请求参数

                console.log(data);

                var param = {};

                param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候

                param.start = data.start;//开始的记录序号

                param.page = (data.start / data.length)+1;//当前页码

                param.order = data.order[0]

                //console.log(param);

                //ajax请求数据

                $.ajax({

                    type: "GET",

                    url: "http://your_server",

                    cache: false,  //禁用缓存

                    data: param,  //传入组装的参数

                    dataType: "json",

                    success: function (result) {

                        console.log(result);

                        //setTimeout仅为测试延迟效果

                        setTimeout(function () {

                            //封装返回数据

                            var returnData = {};

                            returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回

                            returnData.recordsTotal = result.total;//返回数据全部记录

                            returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果

                            returnData.data = result.data;//返回的数据列表

                            //console.log(returnData);

                            //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染

                            //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕

                            callback(returnData);

                        }, 200);

                    }

                });

            },

            //列表表头字段

            columns: [

                { "data": "ip" },

                { "data": "online_state" },

                { "data": "machine_id" },

                { "data": "location" },

                { "data": "agent_state" },

                { "data": "system" }

            ]

        }).api();//此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象

    });

</script>

1. ajax: function(data,callback,settings){}——data

data为datatables本身会提供的数据集合，包含每一列的信息、一页的数据量（一页几行）、查找的值、当前页等，另外根据datatables的初始化选择还会包含其他内容，比如，当点击排序时，data中将包含排序的列、方式。

想要传递给服务端的数据，可以在这一处取。但是最好将数据重新封装一遍再发送给服务器，原因是：

　　1) 有的数据是不需要的，比如在原生搜索关闭的情况下，data中还是会以后search的信息

　　2) 有一些自定义的信息，比如自定义搜索框，可以封装入其中再传给服务器

　　3) 整理格式，比如排序数据 order中， order[0] 包含排序的列和方式，其他没什么用，所以取出order[0] 封装再发送，简洁得多。

数据封装完毕，则采用ajax的方式将数据发送给服务端。

2. ajax: function(data,callback,settings){}——callback

callback为返回给datatables渲染当前表单的数据，以字典形式。

其中，draw与data中的draw相同。

recordsTotal、recordsFiltered填写为数据库总数据量即可，datatables从中获取数据总量、分页数量等。

渲染的核心数据 data，是给表单渲染内容用的。

3. columns字段

columns字段的作用是：

将回调函数中的data中的数据，按columns的排序渲染入表单列中，比如这里，第一列为ip，则将data['ip'] 放到第一列中，以此类推。

4. 后端返回什么数据

后端的数据可以根据传递给回调函数的数据进行猜测拼接，但是data也是字典格式的，返回的数据用Python可以写为：

data = [

    {'ip':'192.168.1.91','online_state':'运行中','machine_id':'','location':'58security','agent_state':'OK','system':'windows'},

    {'ip':'192.168.1.92','online_state':'运行中','machine_id':'','location':'58security','agent_state':'OK','system':'windows'},

    {'ip':'192.168.1.93','online_state':'运行中','machine_id':'','location':'58security','agent_state':'OK','system':'windows'},

    {'ip':'192.168.1.94','online_state':'运行中','machine_id':'','location':'58security','agent_state':'OK','system':'windows'},

    {'ip':'192.168.1.95','online_state':'运行中','machine_id':'','location':'58security','agent_state':'OK','system':'windows'},

    {'ip':'192.168.1.96','online_state':'运行中','machine_id':'','location':'58security','agent_state':'OK','system':'windows'},

    {'ip':'192.168.1.97','online_state':'运行中','machine_id':'','location':'58security','agent_state':'OK','system':'windows'},

    {'ip':'192.168.1.98','online_state':'运行中','machine_id':'','location':'58security','agent_state':'OK','system':'windows'},

    {'ip':'192.168.1.99','online_state':'运行中','machine_id':'','location':'58security','agent_state':'OK','system':'windows'},

    {'ip':'192.168.1.100','online_state':'运行中','machine_id':'','location':'58security','agent_state':'OK','system':'windows'},

]

response = {'data':data,'limit':10,'page':10,'total':100}

return JsonResponse(response)

在 ajax success中接收这些数据，再进行封装、传入datatables回调函数，从而完成渲染。

其中，显而易见，data以 “字段”:"内容"的形式存在于字典中。

5. 自定义搜索(version2)

(上一次写的太丑了)

由此，基本已经完成。

但是原生的搜索是不能用了，所以要自定义搜索。

也找不到添加 <input>框的接口，所以，用jquery遍历搜索再添加<input>元素、绑定事件。

绑定的事件要做什么事呢？

最简单的就是让datatables执行一次提交ajax，这里使用 datatables对象的draw()函数。

JS代码：

function search(){
    table.draw();
}
var search_input = $('#search_input_html').text();
$("#dynamic-table_wrapper").find(".row").first().find(".col-sm-6").last().append(search_input);
$('#searcy_type').html($('#search_type').text());
$("#search_button").click(function(){
    search();
});
$("#search_key").keydown(function(e){
    if(e.keyCode == 13){
        search();
    }
})

其中插入的代码用textarea包裹起来，再用val取代码

<!--ADDING HTML start-->

<textarea id="search_input_html" style="display:none">

    <div class="my_dataTables_filter">

        <div class="span6">

            <select id="searcy_type" class="search_type">

            <select>

            <input id="search_key" class="search_space"></input>

            <button type="button" id="search_button" class="search_button btn">搜索</button>

        </div>

    </div>

</textarea>

<textarea id="search_type" style="display:none">

                <option value="ip">ip</option>

                <option value="online_status">online_status</option>

                <option value="machine_id">machine_id</option>

</textarea>

<!--ADDING HTML end-->

样式CSS：

.my_dataTables_filter {

    float: right;

}

.search_space{

    height:34px;

    position: relative;

    top:2px;

    left:4px;

}

.search_button{

    width: 50px;

    height: 34px;

    color: #fff;

    /*font-size:20%;*/

    letter-spacing: 1px;

    background: #65CEA7;

    border-bottom: 2px solid #65CEA7;

    /*background: #3385ff;*/

    /*border-bottom: 2px solid #2d78f4;*/

    outline: medium;

    -webkit-appearance: none;

    -webkit-border-radius:;

}

.search_type{

    height:34px;

    position: relative;

    top:2px;

    left:4px;

}

在初始化结束后，加入这段JS代码（HTML写在content部分；CSS放在.css中）：遍历、添加元素、绑定事件、事件为datatables发出ajax。

draw()默认参数为true，表明刷新时会跳转到第一页重新刷新；draw(false) 则保持在原页。

同时，搜索的值也要传递给服务端：在封装数据时加入

param.search_key = $("#search_key").val()

参考——重要程度由高到低：

1. datatables服务端处理-可作后端分页文档

2. 引导我做demo的文章 jQuery Data Tables 插件自定义Ajax分页实现

一脸懵时可以做一个demo，后端数据返回，form完成，再一步步做转移。

3. 自行封装请求和返回数据的零耦合服务端分页

4. 官方文档 datatables Ajax

5. dataTables-使用详细说明

巴特西

datatables后端分页

最新文章

热门文章