DataTables服务器端分页

接上面一个前端分页的例子,这里说服务器端分页。服务器分页比前端分页要麻烦一点,但是前端分页在数据量比较大的情况下会比较卡,我试了一下两万多条数据的话十多秒,也可能是因为电脑比较渣。
首先,服务器端分页,页面请求会向服务器传递draw,start,length等参数,其中draw要原封不动的返回给页面,start表示要请求的第一个数据的索引,length表示这个页面需要几个数据。比如说假设length是10,第一页的start就是0,第二页的就是10.
html页面与不分页的相同。datatables初始如下

$(document)
                .ready(
                        function() {
                            $('#table_id')
                                    .DataTable(
                                            {

                                                "iDisplayLength" : 10,//默认每页数量
                                                //"bPaginate": true, //翻页功能
                                                "bLengthChange" : false, //改变每页显示数据数量
                                                //"bFilter" : true, //过滤功能
                                                "ordering" : false,
                                                "bSort" : false, //排序功能
                                                //"bInfo" : true,//页脚信息
                                                //"bAutoWidth" : true,//自动宽度
                                                "stateSave" : true,
                                                "retrieve" : true,
                                                "processing" : true,
                                                "serverSide" : true,
                                                //"bPaginate" : true,

                                                //"bProcessing": true//服务器端进行分页处理的意思
                                                ajax : function(data, callback,
                                                        settings) {//ajax配置为function,手动调用异步查询

                                                    $
                                                            .ajax({
                                                                type : "GET",
                                                                url : "../serviceConfig/getServiceConfigByModel.do",
                                                                cache : false, //禁用缓存
                                                                data : data, //传入已封装的参数
                                                                dataType : "json",
                                                                success : function(
                                                                        res) {
                                                                    //setTimeout仅为测试遮罩效果
                                                                    setTimeout(
                                                                            function() {

                                                                                //封装返回数据,这里仅演示了修改属性名
                                                                                var returnData = {};
                                                                                returnData.draw = res.data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                                                                                returnData.recordsTotal = res.data.recordsTotal;
                                                                                returnData.recordsFiltered = res.data.recordsFiltered;//后台不实现过滤功能,每次查询均视作全部结果
                                                                                returnData.data = res.data.data;
                                                                                //关闭遮罩
                                                                                //$wrapper.spinModal(false);
                                                                                //调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染
                                                                                //此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕
                                                                                callback(returnData);
                                                                            },
                                                                            200);
                                                                },
                                                                error : function(
                                                                        XMLHttpRequest,
                                                                        textStatus,
                                                                        errorThrown) {
                                                                    $
                                                                            .alert("查询失败");

                                                                }
                                                            });
                                                },
                                                columns : [
                                                        {
                                                            data : "id"
                                                        },
                                                        {
                                                            data : "code"
                                                        },
                                                        {
                                                            data : "srvName"
                                                        },
                                                        {
                                                            data : "url"
                                                        },
                                                        {
                                                            data : "description"
                                                        },
                                                        {
                                                            data : "isAllow"
                                                        },
                                                        {
                                                            data : "state"
                                                        },
                                                        {
                                                            data : "frequency"
                                                        },
                                                        {
                                                            data : "createTime"
                                                        },
                                                        {
                                                            data : "remark"
                                                        },
                                                        {
                                                            data : "isDelete",
                                                            render : function(
                                                                    data, type,
                                                                    row) {
                                                                if (data == 0) {
                                                                    return "未删除";
                                                                } else {
                                                                    return "删除";
                                                                }

                                                            }
                                                        } ],

                                                "columnDefs" : [ {
                                                    // 定义操作列,######以下是重点########
                                                    "targets" : 11,//操作按钮目标列
                                                    "data" : null,
                                                    "render" : function(data,
                                                            type, row) {
                                                        var id = '"' + row.id
                                                                + '"';
                                                        //<a href='javascript:void(0);'  class='delete btn btn-default btn-xs'  ><i class='fa fa-times'></i> 查看</a>
                                                        var html = "<button class='btn btn-xs btn-success' onclick='add()'><i class='icon-ok'></i> </button>"
                                                        html += "<button class='btn btn-xs btn-warning' onclick='edit("
                                                                + id
                                                                + ")'><i class='icon-pencil'></i> </button>"
                                                        html += "<button class='btn btn-xs btn-danger' onclick='del("
                                                                + id
                                                                + ")'><i class='icon-remove'></i> </button>"
                                                        return html;
                                                    }
                                                } ]
                                            });
                        });

其中ajax这样写的原因是因为datatables固定死了返回的参数,耦合比较高,这样写可以制定返回的参数而不需要固定的格式,至此服务器端分页完成
展开阅读全文

没有更多推荐了,返回首页