總體思路：
1.前台查詢的時候將當前頁和頁大小傳到后台
2.后台將當前頁，頁大小以及數據與數據總數返回前台，前台顯示完表格完數據之后顯示分頁插件。
前台頁面:
准備查詢條件的表單，與數據表格,分頁div (同時需要在查詢條件表單中准備隱藏當前頁與頁大小的文本框)
<div class="layui-row"> <%--查詢條件的form--%> <form class="layui-form layui-col-md12 x-so" id="queryTrainschemeForm"> <%--隱藏當前頁和頁號--%> <input type="hidden" name="pageNum"> <input type="hidden" name="pageSize"> <input type="text" name="trainingschemaname" placeholder="培養方案名稱" autocomplete="off" class="layui-input"> <input type="text" name="majorname" class="layui-input" placeholder="專業名稱" autocomplete="off"> <input type="text" name="majorid" class="layui-input" placeholder="專業代碼" autocomplete="off"> <div class="layui-input-inline"> <select name="remark1"> <option value="">編輯狀態</option> <option value="保存">保存</option> <option value="已提交">已提交</option> </select> </div> <%-- <div class="layui-input-inline"> <select name="contrller"> <option>是否使用</option> <option>是</option> <option>否</option> </select> </div>--%> <button class="layui-btn" type="button" onclick="queryTrainSchemeFYBtn()"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-normal" type="button" onclick='clearQueryCondition(this)' title="點擊重置查詢條件"><i class="layui-icon"></i></button> </form> </div> <!--操作區域--> <xblock> <button class="layui-btn" onclick="x_admin_show('課程安排','./trainingScheme-course.html')">上傳課程結構圖</button> <button class="layui-btn" onclick="x_admin_show('課程安排','./trainingScheme-course.html')">安排課程</button> <button class="layui-btn" onclick="x_admin_show('課程安排','./trainingScheme-course.html')">安排課程能力</button> <button class="layui-btn layui-btn-normal" onclick="">下載培養方案 </button> </xblock> <!--end 操作區域--> <!--表格內容--> <table class="layui-table"> <thead> <tr> <th></th> <th>序號</th> <th>培養方案名稱</th> <th>專業名稱</th> <th>專業代碼</th> <th>學科門類</th> <th>專業負責人</th> <th>修業年限</th> <th>修訂人</th> <th>修訂時間</th> <th>狀態</th> <th>操作</th> </tr> </thead> <tbody id="trainSchemeTbody"> <!--動態填充數據--> </tbody> </table> <!--end 表格內容--> <!--分頁--> <div id="pageDiv"></div> <!--end 分頁-->
效果:
JS:(重點)
解釋:點擊查詢的時候將頁號清空(這個有時候容易忘)，帶着組合條件去后台查詢，查詢成功后將數據填充到表格之后顯示分頁組件。點擊分頁組件的頁號與上下頁的時候動態設置頁面中隱藏域的值，同時調用查詢方法。
點擊清空條件按鈕的時候清空所有的查詢條件，同時清空頁面隱藏的條件，並進行查詢。
/*****S 分頁查詢相關方法**********/ function queryTrainSchemeFY(){ $.ajax({ url:contextPath+"/TrainScheme/getTrainSchemeFY.do", data:$("#queryTrainschemeForm").serialize(), dataType:'json', type:'post', async:true, success:showTrainSchemeTable }); } /** * 填充表格數據 * @param pageInfo ajax返回的參數信息 */ function showTrainSchemeTable(pageInfo){ // alert(JSON.stringify(pageInfo)) var total = pageInfo.total;//頁總數 var pageNum = pageInfo.pageNum;//頁號 var pageSize = pageInfo.pageSize;//頁大小 var trainschemes = pageInfo.list; $("#trainSchemeTbody").html("");//清空表格中數據並重新填充數據 for(var i=0,length_1 = trainschemes.length;i<length_1;i++){ var index = (pageNum - 1) * pageSize + i + 1; var tr = "<tr><td>"+'<input type="radio" name="trainshemeRadio" value="'+trainschemes[i].trainingSchemeID+'"><input type="hidden" value="'+trainschemes[i].trainingSchemeID+'"/></td>' +'<td>'+index+'</td>' +'<td>'+replaceNull(trainschemes[i].trainingSchemaName)+'</td>' +'<td>'+replaceNull(trainschemes[i].majorName)+'</td>' +'<td>'+replaceNull(trainschemes[i].majorID)+'</td>' +'<td>'+replaceNull(trainschemes[i].majorType)+'</td>' +'<td>'+replaceNull(trainschemes[i].majorManager)+'</td>' +'<td>'+replaceNull(trainschemes[i].trainYears)+'</td>' +'<td>'+replaceNull(trainschemes[i].revisePerson)+'</td>' +'<td>'+replaceNull(trainschemes[i].createTime)+'</td>' +'<td>'+replaceNull(trainschemes[i].remark1)+'</td>' +'<td>' +'<a title="點擊查看課程詳細信息" onclick="openDetailLayer(this)" href=javascript:void(0)><i class="layui-icon"></i></a>' +'<a href=javascript:void(0) title="點擊修改課程基本信息" onclick="openUpdateLayer(this)"><i class="layui-icon"></i></a>' +'<a href=javascript:void(0) title="點擊刪除課程" onclick="deleteCourseByCourseId(this)"><i class="layui-icon"></i></a>' +'</td></tr>' $("#trainSchemeTbody").append(tr); } //開啟分頁組件 trainschemesPage(total,pageNum,pageSize); } /** * layui的分頁插件 * @param total 總數 * @param pageNum 當前頁 * @param pageSize 頁大小 */ function trainschemesPage(total,pageNum,pageSize){ //使用layui的分頁插件 layui.use(['laypage', 'layer'], function(){ var laypage = layui.laypage,layer = layui.layer; //執行一個laypage實例 laypage.render({ elem: 'pageDiv', //注意，這里的 test1 是 ID，不用加 # 號 count: total, //數據總數，從服務端得到 limit:pageSize,//每頁顯示的條數。laypage將會借助 count 和 limit 計算出分頁數。 curr:pageNum,//當前頁號 limits:[6,10,15,20], layout:['limit','prev', 'page', 'next','skip','count'],//顯示哪些分頁組件 jump: function(obj, first){//點擊頁號的時候執行的函數 //obj包含了當前分頁的所有參數，比如： // console.log(obj.curr); //得到當前頁，以便向服務端請求對應頁的數據。 // console.log(obj.limit); //得到每頁顯示的條數 $("[name='pageNum']").val(obj.curr);//向隱藏域設置當前頁的值 $("[name='pageSize']").val(obj.limit);//向隱藏域設置當前頁的大小 if(!first){//首次不執行(點擊的時候才執行) queryTrainSchemeFY();//執行查詢分頁函數(這個函數必須寫在這里) } } }); }); } /** * 點擊查詢放大鏡的事件 */ function queryTrainSchemeFYBtn() { $("[name='pageNum']").val("");//清空頁號 queryTrainSchemeFY();//分頁查詢課程信息 } /** * 清空查詢條件的按鈕 * 1.清空所有的條件，包括隱藏域的條件，2.重新查詢一次 * @param obj 將清空條件按鈕自己傳下來 */ function clearQueryCondition(obj) { //1.清空條件 var form = $(obj).parents("form"); form.find("input").val(""); form.find("select").val(""); //2.重新查詢一次 queryTrainSchemeFY(); } /*****E 分頁查詢相關方法**********/
如果我們想要當數據不足6條的時候不顯示分頁可以在調用分頁組件之前判斷:
if(total < 6){ return; } //開啟分頁組件 usersPage(total,pageNum,pageSize);
后台Java代碼:(返回PageInfo)
/** * 分頁查詢培養方案基本信息 * @param condition 自動映射的查詢條件 * @return 分頁信息 */ @RequestMapping("/getTrainSchemeFY") public PageInfo<Map<String,Object>> getTrainschemeinfosFY(@RequestParam Map condition){ int pageNum = 1; if(ValidateCheck.isNotNull((String) condition.get("pageNum"))){ //如果不為空的話改變當前頁號 pageNum = Integer.parseInt((String) condition.get("pageNum")); } int pageSize = DefaultValue.PAGE_SIZE; if(ValidateCheck.isNotNull((String) condition.get("pageSize"))){ //如果不為空的話改變當前頁大小 pageSize = Integer.parseInt((String) condition.get("pageSize")); } //開始分頁 PageHelper.startPage(pageNum,pageSize); List<Map<String, Object>> trainschemeinfoByCondition = null; try { trainschemeinfoByCondition = trainschemeinfoService.getTrainschemeinfoByCondition(condition); } catch (SQLException e) { e.printStackTrace(); } PageInfo<Map<String,Object>> pageInfo = new PageInfo<Map<String,Object>>(trainschemeinfoByCondition); return pageInfo; }
返回數據格式:
