這里說明的是將說有數據先返回到前端再由前端去分頁，性能可能沒有先在后台分好頁再返回給前端高
但如果操作不涉及大數據的話也沒什么大問題，具體問題具體分析
要使用分頁控件首先要聲明初始化一下：
1 //設置分頁控件 2 var p = $("#tt").datagrid('getPager'); //tt為表格id 3 $(p).pagination({ 4 // pageSize: 10,//每頁顯示的記錄條數，默認為10 5 pageList: [5,10,15],//可以設置每頁記錄條數的列表 6 beforePageText: '第',//頁數文本框前顯示的漢字 7 afterPageText: '頁 共 {pages} 頁', 8 displayMsg: '當前顯示 {from} - {to} 條記錄 共 {total} 條記錄', 9 });
然后是前端的分頁代碼（網上的）：
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 //pageSize: 10,//每頁顯示的記錄條數，默認為10 //這里不設置的畫分頁頁數選擇函數會正確調用，否則每次點擊下一頁 13 pageList: [5,10,15],//可以設置每頁記錄條數的列表 //pageSize都會變回設置的值 14 beforePageText: '第',//頁數文本框前顯示的漢字 15 afterPageText: '頁 共 {pages} 頁', 16 displayMsg: '當前顯示 {from} - {to} 條記錄 共 {total} 條記錄', 17 onChangePageSize:function(){ 18 }, 19 onSelectPage:function(pageNum, pageSize){ 20 opts.pageNumber = pageNum; 21 opts.pageSize = pageSize; 22 pager.pagination('refresh',{ 23 pageNumber:pageNum, 24 pageSize:pageSize 25 }); 26 dg.datagrid('loadData',data); 27 } 28 }); 29 if (!data.originalRows){ 30 data.originalRows = (data.rows); 31 } 32 var start = (opts.pageNumber-1)*parseInt(opts.pageSize); 33 var end = start + parseInt(opts.pageSize); 34 data.rows = (data.originalRows.slice(start, end)); 35 return data; 36 }
1 function doSearch(){ 2 userName = $("#itemid").val(); 3 roleName = $("#roleName").val(); 4 var urlRequest="/account/searchByUserName?userName="+userName+"&roleName=" + roleName; //相對路徑請求 5 $.getJSON(urlRequest, null, function(json) { //get方法獲取json數據，java代碼之前寫過一篇了 6 /* $(function(){ 7 ccb={total:json.length,rows:[json[0]]}; 8 $("#tt").datagrid('loadData', ccb); 9 alert('here'); 10 }); */ 11 ccb = { //Json數據繼續封裝 12 "total": json.length, 13 "rows": json 14 }; 15 $(function(){ 16 $('#tt').datagrid({loadFilter:pagerFilter}).datagrid('loadData', ccb); 17 }); 18 /* $("#tt").datagrid('loadData', { //加載數據類似上面的 19 "total": json.length, 20 "rows": json 21 }); */ 22 }); 23 }
Html代碼順便粘一下：
1 <body> 2 <div class="demo-info" style="margin-bottom:10px"> 3 <div class="demo-tip icon-tip"> </div> 4 <div>輸入查詢關鍵字，點擊查詢搜索</div> 5 </div> 6 7 <table id="tt" class="easyui-datagrid" style="width:1130px;height:540px" 8 title="Searching" iconCls="icon-search" toolbar="#tb" 9 rownumbers="true" pagination="true"> 10 <thead> 11 <tr> 12 <th field="userName" width="150">用戶名</th> 13 <th field="roleName" width="150">角色名</th> 14 <th field="telphone" width=150" >電話</th> 15 <th field="email" width="150" >郵件</th> 16 <th field="sex" width="50">性別</th> 17 <th field="createtime" width="160" align="center">賬戶創建時間</th> 18 </tr> 19 </thead> 20 </table> 21 <div id="tb" style="padding:3px"> 22 <span>用戶名:</span> 23 <input id="itemid" style="line-height:26px;border:1px solid #ccc" onkeydown='if(event.keyCode==13){doSearch();}'> 24 <span>角色名:</span> 25 <select id="roleName" style="line-height:26px;border:1px solid #ccc" onchange="doSelect();"> 26 <option value="all" >所有角色</option> 27 <option value="超級管理員">超級管理員</option> 28 <option value="管理員">管理員</option> 29 </select> 30 <a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">查詢</a> 31 </div> 32 </body>