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固定死了返回的参数,耦合比较高,这样写可以制定返回的参数而不需要固定的格式,至此服务器端分页完成
使用方法: 支持JAVA和PHP两种后台。 PHP:直接将WebRoot下的文件放到php服务器上直接运行即可,记得启用sqlite3。 JAVA:修改user-manage.js,将访问后台的url由"datasource.php"改为"datasource.jsp",然后将WebRoot下的文件放到tomcat下直接运行。也可使用Eclipse直接导入此项目文件。 简要说明: 使用DataTable默认的ajax交互功能,对传给后台和从后台获取的数据都有命名格式要求,这样一来耦合度较高,不利于后期扩展,不能直接适用于需要跟多种不同前端或其他业务交互的项目。本例子主要展示了自行封装请求参数和返回数据的用法,对后台的交互没有任何格式和命名限制。 基于Bootstrap 2.3.2,相关的其他插件包括图标控件FontAwesome、等待提示控件Spinjs(修改版)、弹窗控件lhgdialog(修改版) 主要展现: 封装请求参数(查询、排序、分页,不再需要data、dataFilter和dataSrc) 封装返回数据 自定义查询参数 服务器分页 自行控制和自定义遮罩效果 生成自定义效果的单元格(在线离线) 生成复选框单元格 响应复选框选择事件 生成操作按钮单元格 响应操作栏按钮点击事件 响应行点击事件 渲染回调事件(默认选中第一行) 分页栏增加跳页功能(直接修改了dataTables.bootstrap.jsdataTables.bootstrap.css) CSS实现单元格超长文字省略号显示 CSS实现单元格连续纯字母数字强制换行显示
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值