EasyUI_前台js_分页
1、html:
1 <table id="DataTb" title="客户信息" class="easyui-datagrid" style="width:2000px;height:330px" 2 idfield="itemid" pagination="true" fitcolumns="true" 3 data-options="iconCls:'icon-save',rownumbers:true,url:'../Ajax/Customer.ashx?action=getlist', 4 pageSize:10, pageList:[5,10,15,20],method:'get',toolbar:'#tb',striped:true,singleSelect:true">
2、js:
1 ///分页 2 $('#DataTb').datagrid({ loadFilter: pagerFilter }).datagrid('loadData', getData()); 3 function getData(data) { 4 var rows = []; 5 for (var i = 1; i <= Infinity; i++) { 6 var amount = Math.floor(Math.random() * 1000); 7 var price = Math.floor(Math.random() * 1000); 8 rows.push({ 9 inv: 'Inv No ' + i, 10 date: $.fn.datebox.defaults.formatter(new Date()), 11 name: 'Name ' + i, 12 amount: amount, 13 price: price, 14 cost: amount * price, 15 note: 'Note ' + i 16 }); 17 return rows; 18 } 19 20 }; 21 function pagerFilter(data) { 22 if (typeof data.length == 'number' && typeof data.splice == 'function') { // 判断数据是否是数组 23 data = { 24 total: data.length, 25 rows: data 26 } 27 } 28 var dg = $(this); 29 var opts = dg.datagrid('options'); 30 var pager = dg.datagrid('getPager'); 31 pager.pagination({ 32 onSelectPage: function (pageNum, pageSize) { 33 opts.pageNumber = pageNum; 34 opts.pageSize = pageSize; 35 pager.pagination('refresh', { 36 pageNumber: pageNum, 37 pageSize: pageSize 38 }); 39 dg.datagrid('loadData', data); 40 } 41 }); 42 if (!data.originalRows) { 43 data.originalRows = (data.rows); 44 } 45 var start = (opts.pageNumber - 1) * parseInt(opts.pageSize); 46 var end = start + parseInt(opts.pageSize); 47 data.rows = (data.originalRows.slice(start, end)); 48 return data; 49 }