項目中用到了模板引擎thymeleaf和前端框架layUI,算是一路摸索、一個坑一個坑踩過來的。之前邊學習邊做項目的時候沒有記錄下學習的過程和遇到問題的解決思路和方法,著實有點可惜。所以從現(xiàn)在開始咯。
laypage分頁
下面就以laypage的兩種分頁展開行文的思路:異步刷新分頁和整頁刷新式跳轉(zhuǎn)。具體可參看官方文檔。
異步刷新分頁
首先使用laypage之前,先加載laypage模塊。使用 layui.use(‘laypage')加載即可。
1.前端html代碼如下:
<div id="log-list"></div> <div id="page-list"></div>
2.JS代碼如下:
這部分使用了laypage分頁函數(shù)和jQuery的append函數(shù),實現(xiàn)異步刷新。
function paging(curr){ $.getJSON('/page', { page: curr || 1 //向服務端傳的參數(shù) }, function(res){ //此處
實現(xiàn)以上代碼,基本上的樣式已經(jīng)出來。下面執(zhí)行實現(xiàn)后端分頁和數(shù)據(jù)查詢即可。/p>
3.后端代碼–controller部分:
/** * 功能描述:返回無查詢條件查詢分頁數(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部分:
/** * 功能描述 :無查詢條件分頁 * @param pageCurr * @return * @since */ public List<SubmitLog> getAllLog(int pageCurr){ int pageSize = 10;//每頁顯示十條數(shù)據(jù) int pageStart = (pageCurr - 1) * pageSize;// limit=(pageCurr -1)*10,10 List<SubmitLog> submitLogList = new ArrayList<>(); submitLogList = logMapper.getAllLog(pageSize, pageStart); //計算前端頁面顯示的頁數(shù) // 當前數(shù)據(jù)庫記錄數(shù) int count = submitLogList.get(0).getPageTotal(); int page = count%pageSize == 0 ? count/pageSize : count/pageSize + 1; log.debug("頁數(shù)"+page); submitLogList.get(0).setPageTotal(page); return submitLogList; }
5.后端代碼–dao部分:
/** * 功能描述:查詢所有數(shù)據(jù)--帶分頁 * @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 );
至此,異步分頁前后端結(jié)合基本結(jié)束,因為代碼都帶有必要的注釋,所以也無需過多解釋。
整頁刷新式跳轉(zhuǎn)
這種方式的分頁,基本上分頁邏輯都由laypage去實現(xiàn)了,后端分頁邏輯基本上不用過多考慮。還是比較方便的,建議結(jié)合官網(wǎng)的文檔和代碼進行理解。下面是實現(xiàn)代碼:
1.前端HTML代碼:
//此處是顯示數(shù)據(jù)的具體HTML代碼 <div id="page-list"></div> //分頁顯示的位置
2.Js代碼:
這部分的分頁實現(xiàn),后端只需返回總頁數(shù)即可。
function paging(){ $.getJSON('/weekly-page-count',{},function(res){ //整頁刷新 laypage({ cont: 'page-list', pages: res, //可以叫服務端把總頁數(shù)放在某一個隱藏域,再獲取。假設我們獲取到的是18 curr: function(){ //通過url獲取當前頁,也可以同上(pages)方式獲取 var page = location.search.match(/page=(\d+)/); return page ? page[1] : 1; }(), skip: true, jump: function(e, first){ //觸發(fā)分頁后的回調(diào) if(!first){ //一定要加此判斷,否則初始時會無限刷新 location.href = '?page='+e.curr; } } }); }); } paging();
3.后端代碼–controller部分:
/** * 功能描述:返回無查詢條件查詢分頁數(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部分:
/** * 功能描述:總頁數(shù) * @param userId * @return * @since */ public Integer getPageCount(Integer userId){ int count = 0; count = weeklyMapper.getPageCount(userId); int pageSize = 5; //每頁顯示條數(shù) int page = count%pageSize == 0 ? count/pageSize : count/pageSize + 1; //計算頁數(shù) return page; }
5.后端代碼–dao部分:
/** * 功能描述:無條件查詢記錄條數(shù)==分頁總數(shù) * @param userId * @return * @since */ @Select("SELECT count(1) AS pageTotal FROM weekly WHERE user_id = #{userId}") Integer getPageCount(@Param("userId") Integer userId);
總結(jié):兩種分頁方式使用起來都是比較方便的。使用的場景還是有些不同:異步式適合JQuery重寫頁面比較容易的;整頁式更簡單,各種場景都可以使用。
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com