bootstrap與pagehelper實(shí)現(xiàn)分頁效果
更新時(shí)間：2018年12月29日 14:21:26 作者：yuruixin_china
這篇文章主要為大家詳細(xì)介紹了bootstrap與pagehelper實(shí)現(xiàn)分頁效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
最近做的一些小項(xiàng)目中，都有用到分頁，需要自己去搞。就把整個(gè)分頁實(shí)現(xiàn)整理下吧，方便自己也方便他人。
前臺(tái)
1.引入paging.js
//分頁，頁碼導(dǎo)航,要求參數(shù)為一個(gè)對(duì)象
function createPageNav(opt) {
opt= opt || {};
var $container = opt.$container || null, //必需，頁碼容器，請(qǐng)確保這個(gè)容器只用來存放頁碼導(dǎo)航
pageCount = Number(opt.pageCount) || 0, //必需，頁碼總數(shù)
currentNum = Number(opt.currentNum) || 1, //選填，當(dāng)前頁碼
maxCommonLen = Number(opt.maxCommonLen)|| 10, //選填，普通頁碼的最大個(gè)數(shù)
className = opt.className || "pagination",//選填，分頁類型：pagination或pager等
preText = opt.preText || "上一頁", //選填，上一頁文字顯示，適用于只有前后頁按鈕的情況
nextText = opt.nextText || "下一頁", //選填，下一頁文字，同上
firstText = opt.firstText || "首頁",
lastText = opt.lastText || "末頁",
hasFirstBtn = opt.hasFirstBtn === false ? false : true,
hasLastBtn = opt.hasLastBtn === false ? false : true,
hasPreBtn = opt.hasPreBtn === false ? false : true,
hasNextBtn = opt.hasNextBtn === false ? false : true,
hasInput = opt.hasInput === false ? false : true,
hasCommonPage= opt.hasCommonPage === false ? false : true,//選填，是否存在普通頁
beforeFun = opt.beforeFun || null, //選填，頁碼跳轉(zhuǎn)前調(diào)用的函數(shù)，可通過返回false來阻止跳轉(zhuǎn)，可接收目標(biāo)頁碼參數(shù)
afterFun = opt.afterFun || null, //選填，頁碼跳轉(zhuǎn)后調(diào)用的函數(shù)，可接收目標(biāo)頁碼參數(shù)
noPageFun = opt.noPageFun || null; //選填，頁碼總數(shù)為0時(shí)調(diào)用的函數(shù)
//當(dāng)前顯示的最小頁碼，用于計(jì)算起始頁碼，直接容器,當(dāng)前頁，前，后，首，末，輸入框
var minNum=1,changeLen,$parent,$currentPage,$preBtn,$nextBtn,$firstBtn,$lastBtn,$input;
//容器
if (!$container || $container.length != 1){
console.log("分頁容器不存在或不正確");
return false;
}
//總頁數(shù)
if(pageCount <= 0){
if(noPageFun) noPageFun();
return false;
}
//當(dāng)前頁
if (currentNum < 1) currentNum = 1;
else if (currentNum > pageCount) currentNum = pageCount;
//普通頁碼的最大個(gè)數(shù)，起始頁算法限制，不能小于3
if(maxCommonLen<3) maxCommonLen=3;
//跳轉(zhuǎn)頁響應(yīng)長(zhǎng)度，用于計(jì)算起始頁碼
if(maxCommonLen>=8) changeLen=3;
else if(maxCommonLen>=5) changeLen=2;
else changeLen=1;
$container.hide();
_initPageNav();
$container.show();
function _initPageNav(){
var initStr = [];
initStr.push('<nav><ul class="'+ className +'" onselectstart="return false">');
if(hasFirstBtn)initStr.push('<li class="first-page" value="1"><span>'+ firstText +'</span></li>');
if(hasPreBtn) initStr.push('<li class="pre-page" value="' + (currentNum - 1) + '"><span>'+ preText +'</span></li>');
if(hasNextBtn) initStr.push('<li class="next-page" value="' + (currentNum + 1) + '"><span>'+ nextText +'</span></li>');
if(hasLastBtn) initStr.push('<li class="last-page" value="' + pageCount + '"><span>'+ lastText +'</span></li>');
if(hasInput)
initStr.push('<div class="input-page-div">當(dāng)前第<input type="text" maxlength="6" value="' + currentNum + '" />頁，共<span>'
+ pageCount
+ '</span>頁<button type="button" class="btn btn-xs input-btn-xs">確定</button></div>');
initStr.push('</ul></nav>');
$container.html(initStr.join(""));
//初始化變量
$parent=$container.children().children();
if(hasFirstBtn) $firstBtn = $parent.children("li.first-page");
if(hasPreBtn) $preBtn = $parent.children("li.pre-page");
if(hasNextBtn) $nextBtn = $parent.children("li.next-page");
if(hasLastBtn) $lastBtn = $parent.children("li.last-page");
if(hasInput){
$input = $parent.find("div.input-page-div>input");
$parent.find("div.input-page-div>button").click(function(){
_gotoPage($input.val());
});
}
//初始化功能按鈕
_buttonToggle(currentNum);
//生成普通頁碼
if(hasCommonPage) {
_createCommonPage(_computeStartNum(currentNum), currentNum);
}
//綁定點(diǎn)擊事件
$parent.on("click", "li",function () {
var $this=$(this);
if ($this.is("li") && $this.attr("value")){
if(!$this.hasClass("disabled") && !$this.hasClass("active")){
_gotoPage($this.attr("value"));
}
}
});
}
//跳轉(zhuǎn)到頁碼
function _gotoPage(targetNum) {
targetNum=_formatNum(targetNum);
if (targetNum == 0 || targetNum == currentNum) return false;
// 跳轉(zhuǎn)前回調(diào)函數(shù)
if (beforeFun && beforeFun(targetNum) === false) return false;
//修改值
currentNum=targetNum;
if(hasInput) $input.val(targetNum);
if(hasPreBtn) $preBtn.attr("value", targetNum - 1);
if(hasNextBtn) $nextBtn.attr("value", targetNum + 1);
//修改功能按鈕的狀態(tài)
_buttonToggle(targetNum);
// 計(jì)算起始頁碼
if(hasCommonPage) {
var starNum = _computeStartNum(targetNum);
if (starNum == minNum) {// 要顯示的頁碼是相同的
$currentPage.removeClass("active");
$currentPage = $parent.children("li.commonPage").eq(targetNum - minNum).addClass("active");
}
else {// 需要刷新頁碼
_createCommonPage(starNum, targetNum);
}
}
// 跳轉(zhuǎn)后回調(diào)函數(shù)
if (afterFun) afterFun(targetNum);
}
//整理目標(biāo)頁碼的值
function _formatNum(num){
num = Number(num);
if(isNaN(num)) num=0;
else if (num <= 0) num = 1;
else if (num > pageCount) num = pageCount;
return num;
}
//功能按鈕的開啟與關(guān)閉
function _buttonToggle(current){
if (current == 1) {
if(hasFirstBtn) $firstBtn.addClass("disabled");
if(hasPreBtn) $preBtn.addClass("disabled");
}
else {
if(hasFirstBtn) $firstBtn.removeClass("disabled");
if(hasPreBtn) $preBtn.removeClass("disabled");
}
if (current == pageCount) {
if(hasNextBtn) $nextBtn.addClass("disabled");
if(hasLastBtn) $lastBtn.addClass("disabled");
}
else {
if(hasNextBtn) $nextBtn.removeClass("disabled");
if(hasLastBtn) $lastBtn.removeClass("disabled");
}
}
//計(jì)算當(dāng)前顯示的起始頁碼
function _computeStartNum(targetNum) {
var startNum;
if (pageCount <= maxCommonLen)
startNum = 1;
else {
if ((targetNum - minNum) >= (maxCommonLen-changeLen)) {//跳轉(zhuǎn)到靠后的頁碼
startNum = targetNum - changeLen;
if ((startNum + maxCommonLen-1) > pageCount) startNum = pageCount - (maxCommonLen-1);// 邊界修正
}
else if ((targetNum - minNum) <= (changeLen-1)) {//跳轉(zhuǎn)到靠前的頁碼
startNum = targetNum - (maxCommonLen-changeLen-1);
if (startNum <= 0) startNum = 1;// 邊界修正
}
else {// 不用改變頁碼
startNum = minNum;
}
}
return startNum;
}
//生成普通頁碼
function _createCommonPage(startNum, activeNum) {
var initStr = [];
for (var i = 1,pageNum=startNum; i <= pageCount && i <= maxCommonLen; i++ , pageNum++) {
initStr.push('<li class="commonPage" value="' + pageNum + '"><a href="javascript:" rel="external nofollow" >' + pageNum + '</a></li>');
}
$parent.hide();
$parent.children("li.commonPage").remove();
if(hasPreBtn) $preBtn.after(initStr.join(""));
else if(hasFirstBtn) $firstBtn.after(initStr.join(""));
else $parent.prepend(initStr.join(""));
minNum = startNum;
$currentPage = $parent.children("li.commonPage").eq(activeNum-startNum).addClass("active");
$parent.show();
}
}
2.引入paging.css
ul.pagination>li>span,ul.pagination>li>a,ul.pagination>li.active>a,ul.pager>li>span{
cursor: pointer;
}
.input-page-div>input{
width:5em;
height:1.8em;
margin:0.4em 0.2em 0.2em 0.2em;
text-align: center;
}
.input-page-div>.input-btn-xs{
margin-left:1em;
font-size: 1em;
width:3em;
background-color: #337ab7;
color:#fff;
}
.input-page-div{
display: inline-block;
margin-left:1em;
}
3.頁面中添加一個(gè)div容器
<div id="paging"></div>
4.js中添加一段代碼
createPageNav({
$container : $("#paging"),
pageCount : data.pages,
currentNum : data.pageNum,
afterFun : function(num){
getResult(num,10);
}
});
例：
function getResult(pageNum,pageSize){
$.ajax({
type: "GET",
url: "../../metrics.do?type=8&pageNum="+pageNum+"&pageSize="+pageSize,
data: {},
dataType: "json",
success: function(data){
list = data.data;
createPageNav({
$container : $("#paging"),
pageCount : data.pages,
currentNum : data.pageNum,
afterFun : function(num){
getResult(num,10);
}
});
createList(data.data);
// createSelect(data);
console.info(data);
}
});
}
后臺(tái)
5.引入pagehelper依賴
<!-- yuruixin add mybatis paging -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.1.6</version>
</dependency>
6.service層添加如下代碼
//pageSize=0時(shí)，查詢所有 PageHelper.startPage(pageNum, pageSize); Page<ExtractMetrics> extractMetrics = extractMetricsMapper.selectByCondition(extractMetric,pageNum,pageSize);
7.controller層添加如下代碼
Map<String,Object> map = new HashMap<String,Object>();
//查詢頁數(shù)
map.put("pageNum", extractMetrics.getPageNum());
//每頁條數(shù)
map.put("pageSize", extractMetrics.getPageSize());
//總條數(shù)
map.put("total", extractMetrics.getTotal());
//總頁數(shù)
map.put("pages", extractMetrics.getPages());
map.put("data", extractMetrics.getResult());
至此，bootstrap與pagehelper實(shí)現(xiàn)分頁流程完畢
效果如下：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解webpack和webpack-simple中如何引入css文件
這篇文章主要介紹了詳解webpack和webpack-simple中如何引入css文件，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-06-06
axios攔截器機(jī)制的實(shí)現(xiàn)原理詳解
axios 不僅提供了一套跨平臺(tái)請(qǐng)求,另外還提供了“攔截器”這一中間件機(jī)制,方便你在請(qǐng)求之前、響應(yīng)之后做些操作處理,本文給大家詳細(xì)介紹了axios 攔截器機(jī)制是如何實(shí)現(xiàn)的,需要的朋友可以參考下2024-05-05
js實(shí)現(xiàn)移動(dòng)端導(dǎo)航點(diǎn)擊自動(dòng)滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)移動(dòng)端導(dǎo)航點(diǎn)擊自動(dòng)滑動(dòng)效果，導(dǎo)航可左右滑動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了js中數(shù)組的常用方法,結(jié)合實(shí)例形式分析了js中的常用數(shù)組方法,如push、concat、pop、splice、reverse、join等功能與用法,需要的朋友可以參考下2016-12-12
JavaScript使用prototype屬性實(shí)現(xiàn)繼承操作示例
這篇文章主要介紹了JavaScript使用prototype屬性實(shí)現(xiàn)繼承操作,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript使用prototype屬性實(shí)現(xiàn)繼承的相關(guān)原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
js 實(shí)現(xiàn)的可折疊留言板(附源碼下載)
留言板想必大家都有見過吧，但是可以折疊的卻不是很多，恰好本文提供一個(gè)比較不錯(cuò)的可折疊留言板，感興趣的朋友可以學(xué)習(xí)下2014-07-07
layui實(shí)現(xiàn)下拉框三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了layui實(shí)現(xiàn)下拉框三級(jí)聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
本文主要介紹了Next.js腳手架完整搭建封裝的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
javascript 讀取內(nèi)聯(lián)之外的樣式(style、currentStyle、getComputedStyle區(qū)別介紹
最常用的是style屬性，在JavaScript中，通過document.getElementById(id).style.XXX就可以獲取到XXX的值，但意外的是，這樣做只能取到通過內(nèi)嵌方式設(shè)置的樣式值，即style屬性里面設(shè)置的值。2010-05-05
javascript滾輪事件基礎(chǔ)實(shí)例講解（37）
這篇文章主要為大家詳細(xì)介紹了javascript滾輪事件基礎(chǔ)實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02