<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        laypage+SpringMVC實現(xiàn)后端分頁

        來源:懂視網(wǎng) 責編:小采 時間:2020-11-27 21:53:14
        文檔

        laypage+SpringMVC實現(xiàn)后端分頁

        laypage+SpringMVC實現(xiàn)后端分頁:項目中用到了模板引擎thymeleaf和前端框架layUI,算是一路摸索、一個坑一個坑踩過來的。之前邊學習邊做項目的時候沒有記錄下學習的過程和遇到問題的解決思路和方法,著實有點可惜。所以從現(xiàn)在開始咯。 laypage分頁 下面就以laypage的兩種分頁展開行文的思路
        推薦度:
        導讀laypage+SpringMVC實現(xiàn)后端分頁:項目中用到了模板引擎thymeleaf和前端框架layUI,算是一路摸索、一個坑一個坑踩過來的。之前邊學習邊做項目的時候沒有記錄下學習的過程和遇到問題的解決思路和方法,著實有點可惜。所以從現(xiàn)在開始咯。 laypage分頁 下面就以laypage的兩種分頁展開行文的思路

        項目中用到了模板引擎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){
         //此處
        輸出內(nèi)容 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對象。【如該容器為】:<div id="page1"></div> pages: res[0].pageTotal, //通過后臺拿到的總頁數(shù) curr: curr || 1, //當前頁 skip: true, jump: function(obj, first){ //觸發(fā)分頁后的回調(diào) if(!first){ //點擊跳頁觸發(fā)函數(shù)自身,并傳遞當前頁:obj.curr $("#log-list").text(''); paging(obj.curr); } } }); }); }; //運行 paging();

        實現(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

        文檔

        laypage+SpringMVC實現(xiàn)后端分頁

        laypage+SpringMVC實現(xiàn)后端分頁:項目中用到了模板引擎thymeleaf和前端框架layUI,算是一路摸索、一個坑一個坑踩過來的。之前邊學習邊做項目的時候沒有記錄下學習的過程和遇到問題的解決思路和方法,著實有點可惜。所以從現(xiàn)在開始咯。 laypage分頁 下面就以laypage的兩種分頁展開行文的思路
        推薦度:
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲啪啪免费视频| 99ri精品国产亚洲| 婷婷亚洲综合一区二区| 男男AV纯肉无码免费播放无码| 亚洲婷婷第一狠人综合精品| 成人a视频片在线观看免费| 日本亚洲色大成网站www久久| 在线观看免费宅男视频| 美女视频黄频a免费| AV在线亚洲男人的天堂| 国产精品偷伦视频观看免费| 一区二区三区亚洲| 成熟女人特级毛片www免费| 亚洲AV成人精品日韩一区| 国产v片免费播放| 两个人看的www视频免费完整版| 亚洲天天在线日亚洲洲精| 99久久99这里只有免费费精品 | 免费国内精品久久久久影院| 美女视频黄a视频全免费网站一区 美女视频黄a视频全免费网站色 | 亚洲精品无码AV中文字幕电影网站| 国产精品午夜免费观看网站| 亚洲AV永久无码精品成人| 无人影院手机版在线观看免费| 噜噜噜亚洲色成人网站| 亚洲日本乱码在线观看| 16女性下面扒开无遮挡免费| 亚洲AV无码国产精品永久一区| 亚洲啪啪综合AV一区| 免费中文熟妇在线影片 | 日本免费一二区在线电影| 一区二区3区免费视频| 亚洲专区先锋影音| 日本特黄特黄刺激大片免费| 999zyz**站免费毛片| 精品久久久久久亚洲精品| 亚洲伊人久久综合中文成人网| 亚欧在线精品免费观看一区| 色吊丝免费观看网站| 亚洲第一成年网站大全亚洲| 亚洲乱码中文字幕手机在线|