這篇文章將為大家詳細(xì)講解有關(guān)laypage+SpringMVC怎么實(shí)現(xiàn)后端分頁，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、南漳網(wǎng)站維護(hù)、網(wǎng)站推廣。

項(xiàng)目中用到了模板引擎thymeleaf和前端框架layUI，算是一路摸索、一個(gè)坑一個(gè)坑踩過來的。之前邊學(xué)習(xí)邊做項(xiàng)目的時(shí)候沒有記錄下學(xué)習(xí)的過程和遇到問題的解決思路和方法，著實(shí)有點(diǎn)可惜。所以從現(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ù)，實(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>編號</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;

  //顯示分頁
  laypage({
   cont: 'page-list', //容器。值支持id名、原生dom對象，jquery對象。【如該容器為】：<div id="page1"></div>
   pages: res[0].pageTotal, //通過后臺拿到的總頁數(shù)
   curr: curr || 1, //當(dāng)前頁
   skip: true,
   jump: function(obj, first){ //觸發(fā)分頁后的回調(diào)
   if(!first){ //點(diǎn)擊跳頁觸發(fā)函數(shù)自身，并傳遞當(dāng)前頁：obj.curr
    $("#log-list").text('');
    paging(obj.curr);
   }
   }
  });
  });
 };
 //運(yùn)行
 paging();

實(shí)現(xiàn)以上代碼，基本上的樣式已經(jīng)出來。下面執(zhí)行實(shí)現(xiàn)后端分頁和數(shù)據(jù)查詢即可。/p>

3.后端代碼–controller部分：

/**
  * 功能描述：返回?zé)o查詢條件查詢分頁數(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);
  //計(jì)算前端頁面顯示的頁數(shù)
//  當(dāng)前數(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 即將顯示當(dāng)前頁
  * @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é)束，因?yàn)榇a都帶有必要的注釋，所以也無需過多解釋。

整頁刷新式跳轉(zhuǎn)

這種方式的分頁，基本上分頁邏輯都由laypage去實(shí)現(xiàn)了，后端分頁邏輯基本上不用過多考慮。還是比較方便的，建議結(jié)合官網(wǎng)的文檔和代碼進(jìn)行理解。下面是實(shí)現(xiàn)代碼：

1.前端HTML代碼：

//此處是顯示數(shù)據(jù)的具體HTML代碼
<div id="page-list"></div> //分頁顯示的位置

2.Js代碼：

這部分的分頁實(shí)現(xiàn)，后端只需返回總頁數(shù)即可。

function paging(){
   $.getJSON('/weekly-page-count',{},function(res){
    //整頁刷新
    laypage({
     cont: 'page-list',
     pages: res, //可以叫服務(wù)端把總頁數(shù)放在某一個(gè)隱藏域，再獲取。假設(shè)我們獲取到的是18
     curr: function(){ //通過url獲取當(dāng)前頁，也可以同上（pages）方式獲取
     var page = location.search.match(/page=(\d+)/);
     return page ? page[1] : 1;
     }(), 
     skip: true,
     jump: function(e, first){ //觸發(fā)分頁后的回調(diào)
     if(!first){ //一定要加此判斷，否則初始時(shí)會無限刷新
      location.href = '?page='+e.curr;
     }
     }
    });
   });
  }
  paging();

3.后端代碼–controller部分：

/**
  * 功能描述：返回?zé)o查詢條件查詢分頁數(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; //計(jì)算頁數(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);

兩種分頁方式使用起來都是比較方便的。使用的場景還是有些不同：異步式適合JQuery重寫頁面比較容易的；整頁式更簡單，各種場景都可以使用。

關(guān)于“l(fā)aypage+SpringMVC怎么實(shí)現(xiàn)后端分頁”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

網(wǎng)頁標(biāo)題：laypage+SpringMVC怎么實(shí)現(xiàn)后端分頁
本文URL：http://m.newbst.com/article12/pepcdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、用戶體驗(yàn)、品牌網(wǎng)站制作、小程序開發(fā)、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)