欢迎光临
我的个人博客网站

EasyUI + JQuary + datagride 表格的真实分页与假分页

先明确一下两者的定义

easyui 表格中的分页给提供了两种方式

  • 假分页 :datagride在请求数据时将所有的数据一次请求过来,只是在前端进行展示时给人一种虚假的分页功能展示,外观看起来没有区别这种情形只是针对于数据量较小时使用,数据量大时还是推荐使用真分页
  • 真分页:前后端都进行了分页,也就是分页请求数据,在请求时只请求当页的N行数据,点击下一页时再重新请求第二页的数据

这里先上真实分页的代码,废话不多说了~

1.Html 页面展示表格书写

  1. data-options中是表格的初始化选项的给定,
  2. pageSize:20在这里是表格默认的每个页面中要显示多少行数据
  3. fit:true,是让表格填满整个的页面,适用于内联样式表中
 1 <table id="quaryDg" class="easyui-datagrid" style=""  2        data-options="pagination:true,  3                          pageSize:20,  4                          fitColumns:true,  5                          checkOnSelect:false,  6                          fit:true,  7                           singleSelect:true,  8                          striped:true,  9                          rownumbers:true, 10                          collapsible:false, 11                          toolbar:'#tb', 12                          "> 13         <thead> 14         <tr> 15             <!--        <th data-options="field:'dep1',checkbox:true"></th>--> 16             <th data-options="field:'',width:100,align:'left',align:'left', halign:'center'">第一列</th> 17             <th data-options="field:'',width:120,align:'right', halign:'center'">第二列</th> 18             <th data-options="field:'me',width:100,align:'left', halign:'center'">第一列</th> 19             <th data-options="field:'',width:160,align:'left', halign:'center'">第一列</th> 20             <th data-options="field:'',width:120,align:'right', halign:'center'">第一列</th> 21             <th data-options="field:'',width:110,align:'right', halign:'center'">第一列</th> 22             <th data-options="field:'',width:120,align:'left', halign:'center'">第一列</th> 23             <th data-options="field:'',width:120,align:'left', halign:'center'">第一列</th> 24             <th data-options="field:'',width:120,align:'left', halign:'center'">第一列</th> 25 <tr> 26         </thead> 27     </table>

2.接下来看重头戏,表格的真实分页加载及数据解析

function loadData(value) {     $("#quaryDg").datagrid({             loader: function (param, success, error) {                 var pageNumber = param.page;                 var pageSize = param.rows;                 var url = "http://www.baidu.com";                 var param1 = {                     pageNo: pageNumber,                     pageSize: pageSize,                     key: value,                    //等其他请求参数                 };                 //查询需要载入的数据                 $.ajax({                     url: url,                     type: "POST",                     async: false,                     contentType: 'application/json;charset=UTF-8',                     data: JSON.stringify(param1),                     dataType: "JSON",                     timeout: 20000,                     success: function (data) {                                             var myData = data.data;                         if (myData != null) {                             reLodadDateGrid(myData);//解析数据到表格中                         } else {                             $('#quaryDg').datagrid('loadData', {total: 0, rows: []});                          }                         $("#quaryDg").datagrid("loaded");                     },                     error: function (data) {                      }                 });              },             onClickCell: function (index, field, value) {                 var row = $('#quaryDg').datagrid('getRows')[index];//获取单元格所在行的所有的值 ...             }           }     ) }

对的,你没看错,上面就是用到的datagride中的两个参数方法实现的

  $("#quaryDg").datagrid({             loader: function (param, success, error) {},
onClickCell: function (index, field, value) {})
其中loader方法是联网加载datagride数据使用,onClickCell是表格的单元格点击事件,这个是额外的功能了~
现在只是联网把数据请求出来了,是一堆的json串数据,那么我们怎么才进行解析呢?其实很简单了,接着看~
function reLodadDateGrid(myData) {     var data = myData.list;     var values = [];     for (var i = 0; i < data.length; i++) {         var a = {             'sqfName': data[i].sqfName,             'amountIncluding': data[i].amountIncluding,             'isEgis': data[i].isEgis,             'taxPaymentStatus': data[i].taxPaymentStatus,             'isIssued': data[i].isIssued,             'flowId': data[i].flowId,             'invoiceTypeId': data[i].invoiceTypeId,             'lssuingMethod': data[i].lssuingMethod         };         values.push(a);     }     $('#quaryDg').datagrid('loadData', {total: myData.total, rows: values}); }

上面的数据解析,前面的字段要和html中field属性值对应,也就是列的值,在这里相当于把表格数据从新进行了封装,各个列的顺序可以不一样但是键值对要一对一,也就是你要在每列的数据与每一列保持一致

 说了上面这么多,肯定有人会说,说好的datagride真分页呢?怎么给我讲起了数据解析,别急

其实代码中已经做好了分页的处理~

  1. 在loader方法请求时,我使用了下面两个param值,这个是datagride自动帮我们获取的当前页码和每一个页面的行数,我们只要把她作为请求参数传递给后台,让后台的小哥哥处理后只给我们这些数据就行了~后台分页也有的对应的框架~
     var pageNumber = param.page;                 var pageSize = param.rows;
  2. 像上面配置了之后,你会发现,表格下面的总数和页码都不能点击下一页,总数也不对~别急是因为你需要告诉datagride总的数据有多少,不能说请求10条数据就是10条了,而是我有100条,只是请求了10条展示了,点击下一页时才能请求其他的啊
  3. $('#quaryDg').datagrid('loadData', {total: myData.total, rows: values});
  4. 就是这个,数据解析时,告诉总数total: myData.total,json数据串中肯定要告诉我们总数有多少的,不然鬼知道总数据有多少啊~其中后面的才是我们封装好的对应的数据这样就能完美解析了
  5. easyui的真实分页根本不需要我们手动处理,别想的那么复杂了,看了那么多博客真的走了不少误区~

 


一条完美的分割线

下面就是假分页,确实很简单,easyui 给的Demo里copy过来就能用,就是在数据解析时给一个数据分页过滤器即可

请参考官网

 

 1         function pagerFilter(data){  2             if (typeof data.length == 'number' && typeof data.splice == 'function'){    // is array  3                 data = {  4                     total: data.length,  5                     rows: data  6                 }  7             }  8             var dg = $(this);  9             var opts = dg.datagrid('options'); 10             var pager = dg.datagrid('getPager'); 11             pager.pagination({ 12                 onSelectPage:function(pageNum, pageSize){ 13                     opts.pageNumber = pageNum; 14                     opts.pageSize = pageSize; 15                     pager.pagination('refresh',{ 16                         pageNumber:pageNum, 17                         pageSize:pageSize 18                     }); 19                     dg.datagrid('loadData',data); 20                 } 21             }); 22             if (!data.originalRows){ 23                 data.originalRows = (data.rows); 24             } 25             var start = (opts.pageNumber-1)*parseInt(opts.pageSize); 26             var end = start + parseInt(opts.pageSize); 27             data.rows = (data.originalRows.slice(start, end)); 28             return data; 29         } 30          31         $(function(){ 32             $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData()); 33         });

 

分页过滤器代码来源:http://www.jeasyui.net/demo/502.html

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » EasyUI + JQuary + datagride 表格的真实分页与假分页
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏