easyui資料分頁基礎版(第二版)
阿新 • • 發佈：2018-12-20
1.效果圖
這是最第二個版本，比第一個多一個模糊查詢，這也是企業開發中常用的，首先下載一套easy放到專案中，然後看我的頁面引入的什麼你就引入什麼
頁面資料：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/jquery.dataTables.min.css"> <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> <div style="padding:3px" class="easyui-panel"> <span>班級或輔導員名稱模糊查詢:</span> <input id="mohu" style="line-height:26px;border:1px solid #ccc"> <a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a> <a href="#" class="easyui-linkbutton" plain="true" icon="icon-add">新增</a> <a href="#" class="easyui-linkbutton" plain="true" icon="icon-remove">刪除</a> <a href="#" class="easyui-linkbutton" plain="true" icon="icon-save">編輯</a> </div> <table id="dgs" title="文章管理" 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.dataTables.min.js"></script> <script src="js/jquery-easyui-1.4.3/jquery.easyui.min.js"></script> <script> $(function(){ queryData(); }) function queryData(){ //注意：本來我的url是寫在table標籤中的，但是那樣的話引數不好傳遞需要拼接，所以把url動態寫 $("#dgs").datagrid({ collapsible: true, url: "../../fysq", method: 'POST', queryParams: {"mohu":$("#mohu").val() }, 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) { // } }) } function doSearch(){ queryData(); } </script> </body> </html>
前後臺互動主要注意前臺引數傳遞什麼，後臺需要封裝什麼資料型別進行返回，前臺預設傳遞倆引數page,rows,和一個模糊查詢的引數mohu,而臺封裝的資料需要為map,map中一個rows放資料，一個total放資料條數，知道了這問題就好辦了
controller程式碼：
public Map<String,Object> fysq(int page,int rows,String mohu){ Map<String,Object> map=new HashMap<String,Object>(); List<ClassTable> ct=dataShowService.queryInfoxPlus( page, rows,mohu); int count=dataShowService.queryAllTS(mohu); map.put("rows",ct); map.put("total",count); return map; }
service程式碼：
List<ClassTable> queryInfoxPlus(int page, int rows, String mohu);
int queryAllTS(String mohu);serviceImpl程式碼：
@Override public List<ClassTable> queryInfoxPlus(int page, int rows, String mohu) { //根據當前頁算出來起始資料是第幾條 page=(page-1)*rows; return dataShowServiceMapper.queryInfoxPlus(page,rows,mohu); } @Override public int queryAllTS(String mohu) { return dataShowServiceMapper.queryAllTS(mohu); }
dao：
List<ClassTable> queryInfoxPlus(@Param("page") int page, @Param("rows") int rows, @Param("mohu")String mohu);
int queryAllTS(String mohu);xml:
<select id="queryInfoxPlus" resultType="com.ansheng.entity.ClassTable">
select * from classtable
<if test='mohu!="" or mohu!=null'>
where className LIKE '%${mohu}%' or fdyName LIKE '%${mohu}%'
</if>
limit #{page},#{rows}
</select>
<select id="queryAllTS" resultType="java.lang.Integer">
select count(*) from classtable
<if test='_parameter != "" and _parameter != null'>
where className LIKE '%${_parameter}%' or fdyName LIKE '%${_parameter}%'
</if>
</select>