DataTables服务器端分页

来源:互联网 发布:和知乎类似的平台 编辑:程序博客网 时间:2024/05/06 10:11

接上面一个前端分页的例子,这里说服务器端分页。服务器分页比前端分页要麻烦一点,但是前端分页在数据量比较大的情况下会比较卡,我试了一下两万多条数据的话十多秒,也可能是因为电脑比较渣。
首先,服务器端分页,页面请求会向服务器传递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固定死了返回的参数,耦合比较高,这样写可以制定返回的参数而不需要固定的格式,至此服务器端分页完成
1 0
原创粉丝点击