- A+
所属分类：Web前端
先明确一下两者的定义
easyui 表格中的分页给提供了两种方式
- 假分页 :datagride在请求数据时将所有的数据一次请求过来,只是在前端进行展示时给人一种虚假的分页功能展示,外观看起来没有区别这种情形只是针对于数据量较小时使用,数据量大时还是推荐使用真分页
- 真分页:前后端都进行了分页,也就是分页请求数据,在请求时只请求当页的N行数据,点击下一页时再重新请求第二页的数据
这里先上真实分页的代码,废话不多说了~
1.Html 页面展示表格书写
- data-options中是表格的初始化选项的给定,
- pageSize:20在这里是表格默认的每个页面中要显示多少行数据
-
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真分页呢?怎么给我讲起了数据解析,别急
其实代码中已经做好了分页的处理~
- 在loader方法请求时,我使用了下面两个param值,这个是datagride自动帮我们获取的当前页码和每一个页面的行数,我们只要把她作为请求参数传递给后台,让后台的小哥哥处理后只给我们这些数据就行了~后台分页也有的对应的框架~
var pageNumber = param.page; var pageSize = param.rows; - 像上面配置了之后,你会发现,表格下面的总数和页码都不能点击下一页,总数也不对~别急是因为你需要告诉datagride总的数据有多少,不能说请求10条数据就是10条了,而是我有100条,只是请求了10条展示了,点击下一页时才能请求其他的啊
-
$('#quaryDg').datagrid('loadData', {total: myData.total, rows: values}); - 就是这个,数据解析时,告诉总数total: myData.total,json数据串中肯定要告诉我们总数有多少的,不然鬼知道总数据有多少啊~其中后面的才是我们封装好的对应的数据这样就能完美解析了
- 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
