easyui資料分頁基礎版(第一版)
阿新 • • 發佈：2018-12-20
1.效果圖
這是最基礎版本，比較簡單，首先下載一套easy放到專案中，然後看我的頁面引入的什麼你就引入什麼
頁面資料：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.3/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.3/themes/icon.css"> </head> <body> <table id="dgs" title="韓安生easyui測試" class="easyui-datagrid" fitColumns="true" pagination="true" toolbar="#tb" rownumbers="true"> <thead> <tr> <th field="cb" checkbox="true" align="center"></th> <!--<th field="tid" width="20" align="center" hidden="true"></th>--> <th field="id" width="200" >學號</th> <th field="className" width="100" align="center">班級名稱</th> <th field="classSumNum" width="100" align="center">班級人數</th> <th field="teacherName" width="100" align="center">老師名稱</th> <th field="fdyName" width="100" align="center">輔導員名稱</th> <th field="fdyNum" width="100" align="center">輔導員編號</th> </tr> </thead> </table> <script src="js/jquery.js"></script> <script src="js/jquery-easyui-1.4.3/jquery.easyui.min.js"></script> <script> $(function(){ //注意：本來我的url是寫在table標籤中的，但是那樣的話引數不好傳遞需要拼接，所以把url動態寫 $("#dgs").datagrid({ collapsible: true, url: "../../fysq", method: 'POST', sortName: 'title', loadMsg: "資料載入中...", //資料展示我寫的靜態的在table中，也可以用下面的動態的進行展示 // columns:[[ // {title: '學號', field: 'id', width: 200, align: 'center'}, // {title: '班級名稱', field: 'className', width: 100, align: 'center'}, // {title: '班級人數', field: 'classSumNum', width: 100, align: 'center'}, // {title: '老師名稱', field: 'teacherName', width: 100, align: 'center'}, // {title: '輔導員名稱', field: 'fdyName', width: 100, align: 'center'}, // {title: '輔導員編號', field: 'fdyNum', width: 100, align: 'center'}, // ]] }); //自定義分頁條的樣式，因為預設的可讀性不是很好 var p = $('#dgs').datagrid().datagrid('getPager'); p.pagination({ pageSize: 10, pageList: [10, 20, 30, 40, 50], beforePageText: '第', //下面這幾個引數就用就這個名稱不用改 afterPageText: '共{pages}頁', displayMsg: '當前顯示 {from} 到 {to} ,共{total}記錄', // onSelectPage: function (pageNumber, pageSize) { // } }) }) </script> </body> </html>
前後臺互動主要注意前臺引數傳遞什麼，後臺需要封裝什麼資料型別進行返回，前臺預設傳遞倆引數page,rows,而後臺封裝的資料需要為map,map中一個rows放資料，一個total放資料條數，知道了這問題就好辦了
controller程式碼：
public Map<String,Object> fysq(int page,int rows){ Map<String,Object> map=new HashMap<String,Object>(); List<ClassTable> ct=dataShowService.queryInfoxPlus( page, rows); int count=dataShowService.queryAllTS(); map.put("rows",ct); map.put("total",count); return map; }
注意：在service根據page算出來資料起始條數，page=(page-1)*rows,後面程式碼過於簡單就不咱貼了