laypage+SpringMVC實(shí)現(xiàn)后端分頁
更新時(shí)間：2019年07月27日 18:03:19 作者：起風(fēng)了少年
這篇文章主要為大家詳細(xì)介紹了laypage+SpringMVC實(shí)現(xiàn)后端分頁，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
項(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>編號(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;
//顯示分頁
laypage({
cont: 'page-list', //容器。值支持id名、原生dom對(duì)象，jquery對(duì)象?！救缭撊萜鳛椤浚?lt;div id="page1"></div>
pages: res[0].pageTotal, //通過后臺(tái)拿到的總頁數(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í)會(huì)無限刷新
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);
總結(jié)：兩種分頁方式使用起來都是比較方便的。使用的場(chǎng)景還是有些不同：異步式適合JQuery重寫頁面比較容易的；整頁式更簡(jiǎn)單，各種場(chǎng)景都可以使用。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript-html標(biāo)題滾動(dòng)效果的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄狫avaScript-html標(biāo)題滾動(dòng)效果的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
javascript實(shí)現(xiàn)數(shù)字驗(yàn)證碼的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)javascript實(shí)現(xiàn)數(shù)字驗(yàn)證碼的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
利用原生js和jQuery實(shí)現(xiàn)單選框的勾選和取消操作的方法
下面小編就為大家?guī)硪黄迷鷍s和jQuery實(shí)現(xiàn)單選框的勾選和取消操作的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
JavaScript函數(shù)防抖與函數(shù)節(jié)流的定義及使用詳解
這篇文章主要為大家詳細(xì)介紹一下JavaScript中函數(shù)防抖與函數(shù)節(jié)流的定義及使用，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JS有一定幫助，需要的可以參考一下2022-08-08
JS中自定義定時(shí)器讓它在某一時(shí)刻執(zhí)行
寫一個(gè)方法，讓它在某一時(shí)刻執(zhí)行，即需要在JS中寫一個(gè)定時(shí)器，當(dāng)時(shí)間達(dá)到要求時(shí)間時(shí)，需要執(zhí)行的方法自動(dòng)執(zhí)行，下面的示例大家可以參考下2014-09-09
基于JavaScript實(shí)現(xiàn)線性漸變的高斯模糊效果
這篇文章主要為大家詳細(xì)介紹了高斯模糊算法以及線性漸變的高斯模糊算法的原理,并通過一個(gè)小demo展示了如何實(shí)現(xiàn)y方向上線性漸變的高斯模糊效果,需要的可以了解下2024-01-01
js實(shí)現(xiàn)實(shí)時(shí)刷新的三種形式(setInterval、WebSocket、EventSource)
本文主要介紹了js實(shí)現(xiàn)實(shí)時(shí)刷新的三種形式(setInterval、WebSocket、EventSource),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
下面小編就為大家?guī)硪黄钊肜斫鈐s數(shù)組的sort排序。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
柯里化是將接受多個(gè)參數(shù)的函數(shù)轉(zhuǎn)換成一系列只接受單個(gè)參數(shù)的函數(shù)的過程，而反柯里化是將柯里化函數(shù)轉(zhuǎn)換成接受多個(gè)參數(shù)的函數(shù)的過程，本文將帶大家理解 js 中的柯里化與反柯里化,需要的朋友可以參考下2023-07-07
DataJoin(數(shù)據(jù)連接)是D3中很重要的一個(gè)概念。D3是基于數(shù)據(jù)操作DOM的js庫，DataJoin使我們能夠根據(jù)現(xiàn)有?HTML?文檔中的數(shù)據(jù)集注入、修改和刪除元素。本文主要和大家詳細(xì)聊聊DataJoin的使用，感興趣的可以學(xué)習(xí)一下2022-11-11