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
- datatables服务器端分页查询
- Datatables 服务器端分页
- DataTables服务器端分页
- Datatables(1.10以上版本)服务器端分页(Java)
- datatables.js 简单使用--多选框和服务器端分页
- datatables.js 简单使用--多选框和服务器端分页
- 使用vue和datatables进行表格的服务器端分页
- Datatables.Net服务器端分页,客户与服务器端的交互过程数据
- DataTables—服务器端翻页
- datatables+java实现服务器端分页,排序,查询,列的显示影藏
- datatables+java实现服务器端分页,排序,查询,列的显示影藏
- datatables的服务器分页
- JS----dataTables分页排序
- DataTables插件分页
- springmvc+datatables+mybatis分页
- JS----dataTables分页排序
- DataTables分页表格
- datatables pagehelper分页问题
- maven常用插件用法
- 梯度下降法和随机梯度下降法的区别
- IntentService的使用
- 时间,性别,选择器
- android 动画 之 属性动画
- DataTables服务器端分页
- 提交AppStore审核总有意外出现?美团被下架
- android中新的布局ConstraintLayout
- 互联网自由工作者必须要知道的七点
- yii2权限控制rbac之rule详细讲解
- python画图包seaborn和matplotlib中文字体显示(针对windows系统,,使用ipython notebook)
- 加速linux设备启动速度
- Java 项目优化实战
- Dubbo-Fail to decode request due to: RpcInvocation