EasyUI + JQuary + datagride 表格的真實分頁與假分頁
阿新 • • 發佈：2020-08-27
先明確一下兩者的定義
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