項(xiàng)目中用到了模板引擎thymeleaf和前端框架layUI，算是一路摸索、一個(gè)坑一個(gè)坑踩過(guò)來(lái)的。之前邊學(xué)習(xí)邊做項(xiàng)目的時(shí)候沒(méi)有記錄下學(xué)習(xí)的過(guò)程和遇到問(wèn)題的解決思路和方法，著實(shí)有點(diǎn)可惜。所以從現(xiàn)在開(kāi)始咯。
laypage分頁(yè)
下面就以laypage的兩種分頁(yè)展開(kāi)行文的思路：異步刷新分頁(yè)和整頁(yè)刷新式跳轉(zhuǎn)。具體可參看官方文檔。
異步刷新分頁(yè)
首先使用laypage之前，先加載laypage模塊。使用 layui.use(‘laypage')加載即可。
1.前端html代碼如下：
<div id="log-list"></div><div id="page-list"></div>
2.JS代碼如下：
這部分使用了laypage分頁(yè)函數(shù)和jQuery的append函數(shù)，實(shí)現(xiàn)異步刷新。
function paging(curr){ $.getJSON('/page', { page: curr || 1 //向服務(wù)端傳的參數(shù) }, function(res){ //此處輸出內(nèi)容 var table = $("<table></table>"); table.attr({class:"layui-table admin-table",id:"page"}); var thead = $("<thead><tr><th>編號(hào)</th><th>姓名</th><th>行為</th><th>時(shí)間</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 +">恢復(fù)</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; //顯示分頁(yè) laypage({ cont: 'page-list', //容器。值支持id名、原生dom對(duì)象，jquery對(duì)象。【如該容器為】：<div id="page1"></div> pages: res[0].pageTotal, //通過(guò)后臺(tái)拿到的總頁(yè)數(shù) curr: curr || 1, //當(dāng)前頁(yè) skip: true, jump: function(obj, first){ //觸發(fā)分頁(yè)后的回調(diào) if(!first){ //點(diǎn)擊跳頁(yè)觸發(fā)函數(shù)自身，并傳遞當(dāng)前頁(yè)：obj.curr $("#log-list").text(''); paging(obj.curr); } } }); }); }; //運(yùn)行 paging();實(shí)現(xiàn)以上代碼，基本上的樣式已經(jīng)出來(lái)。下面執(zhí)行實(shí)現(xiàn)后端分頁(yè)和數(shù)據(jù)查詢即可。/p>
3.后端代碼–controller部分：
/** * 功能描述：返回?zé)o查詢條件查詢分頁(yè)數(shù)據(jù) * @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部分：
/** * 功能描述 :無(wú)查詢條件分頁(yè) * @param pageCurr * @return * @since */ public List<SubmitLog> getAllLog(int pageCurr){ int pageSize = 10;//每頁(yè)顯示十條數(shù)據(jù) int pageStart = (pageCurr - 1) * pageSize;// limit=(pageCurr -1)*10,10 List<SubmitLog> submitLogList = new ArrayList<>(); submitLogList = logMapper.getAllLog(pageSize, pageStart); //計(jì)算前端頁(yè)面顯示的頁(yè)數(shù)// 當(dāng)前數(shù)據(jù)庫(kù)記錄數(shù) int count = submitLogList.get(0).getPageTotal(); int page = count%pageSize == 0 ? count/pageSize : count/pageSize + 1; log.debug("頁(yè)數(shù)"+page); submitLogList.get(0).setPageTotal(page); return submitLogList; }5.后端代碼–dao部分：
/** * 功能描述：查詢所有數(shù)據(jù)--帶分頁(yè) * @param pageSize 每頁(yè)大小 * @param pageCurr 即將顯示當(dāng)前頁(yè) * @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 );至此，異步分頁(yè)前后端結(jié)合基本結(jié)束，因?yàn)榇a都帶有必要的注釋，所以也無(wú)需過(guò)多解釋。
整頁(yè)刷新式跳轉(zhuǎn)
這種方式的分頁(yè)，基本上分頁(yè)邏輯都由laypage去實(shí)現(xiàn)了，后端分頁(yè)邏輯基本上不用過(guò)多考慮。還是比較方便的，建議結(jié)合官網(wǎng)的文檔和代碼進(jìn)行理解。下面是實(shí)現(xiàn)代碼：
1.前端HTML代碼：
//此處是顯示數(shù)據(jù)的具體HTML代碼<div id="page-list"></div> //分頁(yè)顯示的位置
2.Js代碼：
這部分的分頁(yè)實(shí)現(xiàn)，后端只需返回總頁(yè)數(shù)即可。
function paging(){ $.getJSON('/weekly-page-count',{},function(res){ //整頁(yè)刷新 laypage({ cont: 'page-list', pages: res, //可以叫服務(wù)端把總頁(yè)數(shù)放在某一個(gè)隱藏域，再獲取。假設(shè)我們獲取到的是18 curr: function(){ //通過(guò)url獲取當(dāng)前頁(yè)，也可以同上（pages）方式獲取 var page = location.search.match(/page=(/d+)/); return page ? page[1] : 1; }(), skip: true, jump: function(e, first){ //觸發(fā)分頁(yè)后的回調(diào) if(!first){ //一定要加此判斷，否則初始時(shí)會(huì)無(wú)限刷新 location.href = '?page='+e.curr; } } }); }); } paging();3.后端代碼–controller部分：
/** * 功能描述：返回?zé)o查詢條件查詢分頁(yè)數(shù)--用戶 * @param page * @return * @since */ @RequestMapping(value="/weekly-page-count") @ResponseBody public Integer getPage1(Integer userId){ Integer count = weeklyService.getPageCount(userId); return count; }4.后端代碼–service部分：
/** * 功能描述：總頁(yè)數(shù) * @param userId * @return * @since */ public Integer getPageCount(Integer userId){ int count = 0; count = weeklyMapper.getPageCount(userId); int pageSize = 5; //每頁(yè)顯示條數(shù) int page = count%pageSize == 0 ? count/pageSize : count/pageSize + 1; //計(jì)算頁(yè)數(shù) return page; }5.后端代碼–dao部分：
/** * 功能描述：無(wú)條件查詢記錄條數(shù)==分頁(yè)總數(shù) * @param userId * @return * @since */ @Select("SELECT count(1) AS pageTotal FROM weekly WHERE user_id = #{userId}") Integer getPageCount(@Param("userId") Integer userId);總結(jié)：兩種分頁(yè)方式使用起來(lái)都是比較方便的。使用的場(chǎng)景還是有些不同：異步式適合JQuery重寫頁(yè)面比較容易的；整頁(yè)式更簡(jiǎn)單，各種場(chǎng)景都可以使用。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
