先明确一下两者的定义 easyui 表格中的分页给提供了两种方式
这里先上真实分页的代码,废话不多说了~ 1.Html 页面展示表格书写
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) {}, 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}); } 说了上面这么多,肯定有人会说,说好的datagride真分页呢?怎么给我讲起了数据解析,别急 其实代码中已经做好了分页的处理~
一条完美的分割线 下面就是假分页,确实很简单,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./demo/502.html
|
|