項目中用到了模板引擎thymeleaf和前端框架layUI，算是一路摸索、一個坑一個坑踩過來的。之前邊學習邊做項目的時候沒有記錄下學習的過程和遇到問題的解決思路和方法，著實有點可惜。所以從現在開始咯。
laypage分頁
下面就以laypage的兩種分頁展開行文的思路：異步刷新分頁和整頁刷新式跳轉。具體可參看官方文檔。
異步刷新分頁
首先使用laypage之前，先加載laypage模塊。使用 layui.use(‘laypage')加載即可。
1.前端html代碼如下：
<div id="log-list"></div><div id="page-list"></div>
2.JS代碼如下：
這部分使用了laypage分頁函數和jQuery的append函數，實現異步刷新。
function paging(curr){ $.getJSON('/page', { page: curr || 1 //向服務端傳的參數 }, function(res){ //此處輸出內容 var table = $("<table></table>"); table.attr({class:"layui-table admin-table",id:"page"}); var thead = $("<thead><tr><th>編號</th><th>姓名</th><th>行為</th><th>時間</th><th>操作</th></tr></thead>"); table.append(thead); var tbody = $("<tbody></tbody>"); tbody.attr({id:"content"}); $(function(){ var datas = res; $.each(datas,function(index,value){ var tr = $("<tr></tr>"); tr.append("<td>"+ (++index) + "</td>"); tbody.append(tr); tr.append("<td>"+ value.staffName + "</td>"); tbody.append(tr); tr.append("<td>"+ value.operation + "</td>"); tbody.append(tr); tr.append("<td>"+ value.createTime + "</td>"); tbody.append(tr); var td = $("<td></td>"); var div = $("<div></div>"); div.attr({class:"layui-btn-group"}); var button1 = $("<button detailId=" + value.weeklyId +">詳情</button>"); button1.attr({class:"layui-btn detail"}); var button2 = $("<button recoveryId=" + value.weeklyId +">恢復</button>"); button2.attr({class:"layui-btn recovery"}); div.append(button1);div.append(button2); td.append(div); tr.append(td); tbody.append(tr); }); }); table.append(tbody); $("#log-list").append(table); // $("#log-list").innerHTML = table; //顯示分頁 laypage({ cont: 'page-list', //容器。值支持id名、原生dom對象，jquery對象?！救缭撊萜鳛椤浚?lt;div id="page1"></div> pages: res[0].pageTotal, //通過后臺拿到的總頁數 curr: curr || 1, //當前頁 skip: true, jump: function(obj, first){ //觸發分頁后的回調 if(!first){ //點擊跳頁觸發函數自身，并傳遞當前頁：obj.curr $("#log-list").text(''); paging(obj.curr); } } }); }); }; //運行 paging();實現以上代碼，基本上的樣式已經出來。下面執行實現后端分頁和數據查詢即可。/p>
3.后端代碼–controller部分：
/** * 功能描述：返回無查詢條件查詢分頁數據 * @param page * @return * @since */ @RequestMapping(value="/page") @ResponseBody public List<SubmitLog> getPage(Integer page){ if(page == null){ page = 1; } List<SubmitLog> submitLogList = new ArrayList<>(); submitLogList = logService.getAllLog(page); return submitLogList; }4.后端代碼–service部分：
/** * 功能描述 :無查詢條件分頁 * @param pageCurr * @return * @since */ public List<SubmitLog> getAllLog(int pageCurr){ int pageSize = 10;//每頁顯示十條數據 int pageStart = (pageCurr - 1) * pageSize;// limit=(pageCurr -1)*10,10 List<SubmitLog> submitLogList = new ArrayList<>(); submitLogList = logMapper.getAllLog(pageSize, pageStart); //計算前端頁面顯示的頁數// 當前數據庫記錄數 int count = submitLogList.get(0).getPageTotal(); int page = count%pageSize == 0 ? count/pageSize : count/pageSize + 1; log.debug("頁數"+page); submitLogList.get(0).setPageTotal(page); return submitLogList; }5.后端代碼–dao部分：
/** * 功能描述：查詢所有數據--帶分頁 * @param pageSize 每頁大小 * @param pageCurr 即將顯示當前頁 * @return * @since */ @Select("SELECT s.pageTotal,number_id,staff_name,create_time,weekly_id,operation FROM submit_log," + "(SELECT count(1) AS pageTotal FROM submit_log) s ORDER BY number_id DESC LIMIT #{pageStart},#{pageSize}") @Results({ @Result(column="number_id",property="numberId"), @Result(column="staff_name",property="staffName"), @Result(column="create_time",property="createTime"), @Result(column="weekly_id",property="weeklyId") }) List<SubmitLog> getAllLog(@Param("pageSize") int pageSize,@Param("pageStart") int pageStart );至此，異步分頁前后端結合基本結束，因為代碼都帶有必要的注釋，所以也無需過多解釋。
整頁刷新式跳轉
這種方式的分頁，基本上分頁邏輯都由laypage去實現了，后端分頁邏輯基本上不用過多考慮。還是比較方便的，建議結合官網的文檔和代碼進行理解。下面是實現代碼：
1.前端HTML代碼：
//此處是顯示數據的具體HTML代碼<div id="page-list"></div> //分頁顯示的位置
2.Js代碼：
這部分的分頁實現，后端只需返回總頁數即可。
function paging(){ $.getJSON('/weekly-page-count',{},function(res){ //整頁刷新 laypage({ cont: 'page-list', pages: res, //可以叫服務端把總頁數放在某一個隱藏域，再獲取。假設我們獲取到的是18 curr: function(){ //通過url獲取當前頁，也可以同上（pages）方式獲取 var page = location.search.match(/page=(/d+)/); return page ? page[1] : 1; }(), skip: true, jump: function(e, first){ //觸發分頁后的回調 if(!first){ //一定要加此判斷，否則初始時會無限刷新 location.href = '?page='+e.curr; } } }); }); } paging();3.后端代碼–controller部分：
/** * 功能描述：返回無查詢條件查詢分頁數--用戶 * @param page * @return * @since */ @RequestMapping(value="/weekly-page-count") @ResponseBody public Integer getPage1(Integer userId){ Integer count = weeklyService.getPageCount(userId); return count; }4.后端代碼–service部分：
/** * 功能描述：總頁數 * @param userId * @return * @since */ public Integer getPageCount(Integer userId){ int count = 0; count = weeklyMapper.getPageCount(userId); int pageSize = 5; //每頁顯示條數 int page = count%pageSize == 0 ? count/pageSize : count/pageSize + 1; //計算頁數 return page; }5.后端代碼–dao部分：
/** * 功能描述：無條件查詢記錄條數==分頁總數 * @param userId * @return * @since */ @Select("SELECT count(1) AS pageTotal FROM weekly WHERE user_id = #{userId}") Integer getPageCount(@Param("userId") Integer userId);總結：兩種分頁方式使用起來都是比較方便的。使用的場景還是有些不同：異步式適合JQuery重寫頁面比較容易的；整頁式更簡單，各種場景都可以使用。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
