前端分頁功能的實現(xiàn)以及原理（jQuery）
更新時間：2017年01月22日 16:55:01 作者：webNick
本文主要介紹了基于jQuery實現(xiàn)的前端分頁功能，并分析了其實現(xiàn)原理。具有很好的參考價值，下面跟著小編一起來看下吧
分頁場景常見于電商網站，比如說淘寶天貓的評論區(qū)，分頁功能一般是后臺實現(xiàn)，前端請求就完事了?，F(xiàn)閑得無聊，就寫出來玩玩，只實現(xiàn)功能，并未封裝。
基于jq實現(xiàn)分頁功能，大致分為以下幾步：
- 定義一個分頁方法，可多次調用
- 參數設置
- 請求數據頁面跳轉方法
- 創(chuàng)建非數字按鈕和數據內容區(qū)
- 創(chuàng)建數字按鈕
- 首屏加載
- 調用
結構層只需要一個容器
<div class="pagination-nick"></div>
一、定義分頁方法
function paginationNick(opt){
//code
}
二、參數設置
幾個必填的容器class，和幾個可以修改的默認數據參數
var pager={
paginationBox:'',//分頁容器-- 必填
mainBox:'',//內容盒子--必填
numBtnBox:'',//數字按鈕盒子-- 必填
btnBox:'',//按鈕盒子 --必填
ipt:'',//input class-- 必填
goBtn:'',//go btn class --必填
currentBtn:'',//當前按鈕class name --必填
pageCount:5,//每頁顯示幾條數據
numBtnCount:3,//當前頁左右兩邊各多少個數字按鈕
currentPage:0,//當前頁碼data-page，首屏默認值
maxCount:0,//ajax請求數據分成的最大頁碼
data:[]//ajax請求的數據
};
pager = $.extend(pager,opt);
三、請求數據頁面跳轉方法
創(chuàng)建所有的按鈕時都用了自定義屬性data-page保留要跳轉的頁碼信息，調用時將此屬性作為參數用于跳轉頁面判斷。
function goPage(btn){
//code
}
obj為ajax請求數據（用于模擬）
var obj={other:{},value:[11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0]};
將展示的數據賦值給pager.data (array)
pager.data=obj.value;
設置ajax請求數據分成的最大頁碼
pager.maxCount=pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) +1 : pager.data.length / pager.pageCount;
設置當前頁碼
if(!isNaN(btn)){//數字按鈕
pager.currentPage=parseInt(btn);
}else{
switch(btn){
case 'first':
pager.currentPage=0;
break;
case 'prev':
if(pager.currentPage>0){
--pager.currentPage;
}
break;
case 'next':
if(pager.currentPage+1<pager.maxCount){
++pager.currentPage;
}
break;
case 'last':
pager.currentPage=pager.maxCount-1;
break;
}
}
創(chuàng)建數字按鈕
createNumBtn(pager.currentPage);
賦值給頁碼跳轉輸入框的value，表示當前頁碼
$('.'+pager.btnBox+' .'+pager.ipt).val(pager.currentPage+1);
內容區(qū)填充數據
var arr=[],str='';
arr=pager.data.slice(pager.pageCount*pager.currentPage,
pager.data.length - pager.pageCount*(pager.currentPage+1) > -1 ?
pager.pageCount*(pager.currentPage+1) : pager.data.length);
arr.forEach(function(v){
str+='<div>'+v+'</div>';
});
$('.'+pager.mainBox).html(str);
四、創(chuàng)建非數字按鈕和數據內容區(qū)
function createOtherBtn(){
//code
}
內容填充
$('.'+pager.paginationBox).html('<div class="'+pager.btnBox+'"><button data-page="first" class="first-btn">首頁</button><button data-page="prev" class="prev-btn">上一頁</button><span class="'+pager.numBtnBox+'"></span><button data-page="next" class="next-btn">下一頁</button><input type="text" placeholder="請輸入頁碼" class="'+pager.ipt+'"><button class="'+pager.goBtn+'">確定go</button><button data-page="last" class="last-btn">尾頁</button></div><div class="'+pager.mainBox+'"></div>');
監(jiān)聽ipt value變化并賦值給go btn data-page
$('.'+pager.btnBox+' .'+pager.ipt).change(function(){
if(!isNaN($(this).val())){//是數字
if($(this).val() > pager.maxCount){//限制value最大值，跳轉尾頁
$(this).val(pager.maxCount);
}
if($(this).val()<1){//限制value最小值，跳轉首頁
$(this).val(1);
}
}else{//非數字清空value
$(this).val('');
}
$('.'+pager.btnBox+' .'+pager.goBtn).attr('data-page',$(this).val() ? $(this).val()-1 : '');
});
每個btn綁定請求數據頁面跳轉方法
$('.'+pager.btnBox+' button').each(function(i,v){
$(this).click(function(){
//有值且不是上一次的頁碼時才調用
if(v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage){
goPage(v.getAttribute('data-page'));
}
});
});
五、創(chuàng)建數字按鈕
function createNumBtn(page){
//code
}
創(chuàng)建數字按鈕區(qū)
將數字按鈕區(qū)分成當前頁左右2邊分析，需要注意的地方都加注釋了
var str='';
if(pager.maxCount>pager.numBtnCount*2){//若最大頁碼數大于等于固定數字按鈕總數（pager.numBtnCount*2+1）時
//此頁左邊右邊各pager.numBtnCount個數字按鈕
if(page-pager.numBtnCount>-1){//此頁左邊有pager.numBtnCount頁 page頁碼從0開始
for(var m=pager.numBtnCount;m>0;m--){
str+='<button data-page="'+(page-m)+'">'+(page-m+1)+'</button>';
}
}else{
for(var k=0;k<page;k++){
str+='<button data-page="'+k+'">'+(k+1)+'</button>';
}
}
str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此頁
if(pager.maxCount-page>3){//此頁右邊有pager.numBtnCount頁 page頁碼從0開始
for(var j=1;j<pager.numBtnCount+1;j++){
str+='<button data-page="'+(page+j)+'">'+(page+j+1)+'</button>';
}
}else{
for(var i=page+1;i<pager.maxCount;i++){
str+='<button data-page="'+i+'">'+(i+1)+'</button>';
}
}
/*數字按鈕總數小于固定的數字按鈕總數pager.numBtnCount*2+1時，
這個分支，可以省略*/
if(str.match(/<\/button>/ig).length<pager.numBtnCount*2+1){
str='';
if(page<pager.numBtnCount){//此頁左邊頁碼少于固定按鈕數時
for(var n=0;n<page;n++){//此頁左邊
str+='<button data-page="'+n+'">'+(n+1)+'</button>';
}
str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此頁
for(var x=1;x<pager.numBtnCount*2+1-page;x++){//此頁右邊
str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>';
}
}
if(pager.maxCount-page-1<pager.numBtnCount){
for(var y=pager.numBtnCount*2-(pager.maxCount-page-1);y>0;y--){//此頁左邊
str+='<button data-page="'+(page-y)+'">'+(page-y+1)+'</button>';
}
str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此頁
for(var z=page+1;z<pager.maxCount;z++){//此頁右邊
str+='<button data-page="'+z+'">'+(z+1)+'</button>';
}
}
}
}else{
str='';
for(var n=0;n<page;n++){//此頁左邊
str+='<button data-page="'+n+'">'+(n+1)+'</button>';
}
str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此頁
for(var x=1;x<pager.maxCount-page;x++){//此頁右邊
str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>';
}
}
$('.'+pager.numBtnBox).html(str);
每個btn綁定請求數據頁面跳轉方法
$('.'+pager.numBtnBox+' button').each(function(i,v){
$(this).click(function(){
goPage(v.getAttribute('data-page'));
});
});
按鈕禁用
$('.'+pager.btnBox+' button').not('.'+pager.currentBtn).attr('disabled',false);
if(!page){//首頁時 $('.'+pager.btnBox+' .first-btn').attr('disabled',true);
$('.'+pager.btnBox+' .prev-btn').attr('disabled','disabled');
}
if(page==pager.maxCount-1){//尾頁時
$('.'+pager.btnBox+' .last-btn').attr('disabled',true);
$('.'+pager.btnBox+' .next-btn').attr('disabled',true);
}
六、首屏加載
createOtherBtn();//首屏加載一次非數字按鈕即可 goPage();//請求數據頁面跳轉滿足條件按鈕點擊都執(zhí)行，首屏默認跳轉到currentPage
七、調用
paginationNick({
paginationBox:'pagination-nick',//分頁容器--必填
mainBox:'main-box-nick',//內容盒子--必填
numBtnBox:'num-box-nick',//數字按鈕盒子-- 必填
btnBox:'btn-box-nick',//按鈕盒子 --必填
ipt:'page-ipt-nick',//input class-- 必填
goBtn:'go-btn-nick',//go btn class --必填
currentBtn:'active-nick'//當前按鈕class name --必填
});
需要注意的地方，注釋都加上了！
完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pagination-nick</title>
<style>
button{
padding:5px;
margin:5px;
}
.active-nick{
color:red;
}
input{
width:50px;
text-align:center;
}
</style>
</head>
<body>
<div class="pagination-nick"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// 定義一個分頁方法，可多次調用
function paginationNick(opt){
// 參數設置
var pager={
paginationBox:'',//分頁容器-- 必填
mainBox:'',//內容盒子--必填
numBtnBox:'',//數字按鈕盒子-- 必填
btnBox:'',//按鈕盒子 --必填
ipt:'',//input class-- 必填
goBtn:'',//go btn class --必填
currentBtn:'',//當前按鈕class name --必填
pageCount:5,//每頁顯示幾條數據
numBtnCount:3,//當前頁左右兩邊各多少個數字按鈕
currentPage:0,//當前頁碼data-page，首屏默認值
maxCount:0,//ajax請求數據分成的最大頁碼
data:[]//ajax請求的數據
};
pager = $.extend(pager,opt);
//請求數據頁面跳轉方法
function goPage(btn){
//obj為ajax請求數據
var obj={other:{},value:[11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0]};
//將展示的數據賦值給pager.data (array)
pager.data=obj.value;
//設置ajax請求數據分成的最大頁碼
pager.maxCount=pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) +1 :
pager.data.length / pager.pageCount;
// 設置當前頁碼
if(!isNaN(btn)){//數字按鈕
pager.currentPage=parseInt(btn);
}else{
switch(btn){
case 'first':
pager.currentPage=0;
break;
case 'prev':
if(pager.currentPage>0){
--pager.currentPage;
}
break;
case 'next':
if(pager.currentPage+1<pager.maxCount){
++pager.currentPage;
}
break;
case 'last':
pager.currentPage=pager.maxCount-1;
break;
}
}
//創(chuàng)建數字按鈕
createNumBtn(pager.currentPage);
//賦值給頁碼跳轉輸入框的value，表示當前頁碼
$('.'+pager.btnBox+' .'+pager.ipt).val(pager.currentPage+1);
// 內容區(qū)填充數據
var arr=[],str='';
arr=pager.data.slice(pager.pageCount*pager.currentPage,
pager.data.length - pager.pageCount*(pager.currentPage+1) > -1 ?
pager.pageCount*(pager.currentPage+1) : pager.data.length);
arr.forEach(function(v){
str+='<div>'+v+'</div>';
});
$('.'+pager.mainBox).html(str);
}
//創(chuàng)建非數字按鈕和數據內容區(qū)
function createOtherBtn(){
$('.'+pager.paginationBox).html('<div class="'+pager.btnBox+'"><button data-page="first" class="first-btn">首頁</button><button data-page="prev" class="prev-btn">上一頁</button><span class="'+pager.numBtnBox+'"></span><button data-page="next" class="next-btn">下一頁</button><input type="text" placeholder="請輸入頁碼" class="'+pager.ipt+'"><button class="'+pager.goBtn+'">確定go</button><button data-page="last" class="last-btn">尾頁</button></div><div class="'+pager.mainBox+'"></div>');
//ipt value變化并賦值給go btn data-page
$('.'+pager.btnBox+' .'+pager.ipt).change(function(){
if(!isNaN($(this).val())){//是數字
if($(this).val() > pager.maxCount){//限制value最大值，跳轉尾頁
$(this).val(pager.maxCount);
}
if($(this).val()<1){//限制value最小值，跳轉首頁
$(this).val(1);
}
}else{//非數字清空value
$(this).val('');
}
$('.'+pager.btnBox+' .'+pager.goBtn).attr('data-page',$(this).val() ? $(this).val()-1 : '');
});
//每個btn綁定請求數據頁面跳轉方法
$('.'+pager.btnBox+' button').each(function(i,v){
$(this).click(function(){
//有值且不是上一次的頁碼時才調用
if(v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage){
goPage(v.getAttribute('data-page'));
}
});
});
}
//創(chuàng)建數字按鈕
function createNumBtn(page){
//page是頁面index從0開始，這里的page加減一要注意
var str='';
if(pager.maxCount>pager.numBtnCount*2){//若最大頁碼數大于等于固定數字按鈕總數（pager.numBtnCount*2+1）時
//此頁左邊右邊各pager.numBtnCount個數字按鈕
if(page-pager.numBtnCount>-1){//此頁左邊有pager.numBtnCount頁 page頁碼從0開始
for(var m=pager.numBtnCount;m>0;m--){
str+='<button data-page="'+(page-m)+'">'+(page-m+1)+'</button>';
}
}else{
for(var k=0;k<page;k++){
str+='<button data-page="'+k+'">'+(k+1)+'</button>';
}
}
str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此頁
if(pager.maxCount-page>3){//此頁右邊有pager.numBtnCount頁 page頁碼從0開始
for(var j=1;j<pager.numBtnCount+1;j++){
str+='<button data-page="'+(page+j)+'">'+(page+j+1)+'</button>';
}
}else{
for(var i=page+1;i<pager.maxCount;i++){
str+='<button data-page="'+i+'">'+(i+1)+'</button>';
}
}
/*數字按鈕總數小于固定的數字按鈕總數pager.numBtnCount*2+1時，
這個分支，可以省略*/
if(str.match(/<\/button>/ig).length<pager.numBtnCount*2+1){
str='';
if(page<pager.numBtnCount){//此頁左邊頁碼少于固定按鈕數時
for(var n=0;n<page;n++){//此頁左邊
str+='<button data-page="'+n+'">'+(n+1)+'</button>';
}
str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此頁
for(var x=1;x<pager.numBtnCount*2+1-page;x++){//此頁右邊
str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>';
}
}
if(pager.maxCount-page-1<pager.numBtnCount){
for(var y=pager.numBtnCount*2-(pager.maxCount-page-1);y>0;y--){//此頁左邊
str+='<button data-page="'+(page-y)+'">'+(page-y+1)+'</button>';
}
str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此頁
for(var z=page+1;z<pager.maxCount;z++){//此頁右邊
str+='<button data-page="'+z+'">'+(z+1)+'</button>';
}
}
}
}else{
str='';
for(var n=0;n<page;n++){//此頁左邊
str+='<button data-page="'+n+'">'+(n+1)+'</button>';
}
str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此頁
for(var x=1;x<pager.maxCount-page;x++){//此頁右邊
str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>';
}
}
$('.'+pager.numBtnBox).html(str);
//每個btn綁定請求數據頁面跳轉方法
$('.'+pager.numBtnBox+' button').each(function(i,v){
$(this).click(function(){
goPage(v.getAttribute('data-page'));
});
});
//按鈕禁用
$('.'+pager.btnBox+' button').not('.'+pager.currentBtn).attr('disabled',false);
if(!page){//首頁時
$('.'+pager.btnBox+' .first-btn').attr('disabled',true);
$('.'+pager.btnBox+' .prev-btn').attr('disabled','disabled');
}
if(page==pager.maxCount-1){//尾頁時
$('.'+pager.btnBox+' .last-btn').attr('disabled',true);
$('.'+pager.btnBox+' .next-btn').attr('disabled',true);
}
}
//首屏加載
createOtherBtn();//首屏加載一次非數字按鈕即可
goPage();//請求數據頁面跳轉滿足條件按鈕點擊都執(zhí)行，首屏默認跳轉到currentPage
}
//調用
paginationNick({
paginationBox:'pagination-nick',//分頁容器--必填
mainBox:'main-box-nick',//內容盒子--必填
numBtnBox:'num-box-nick',//數字按鈕盒子-- 必填
btnBox:'btn-box-nick',//按鈕盒子 --必填
ipt:'page-ipt-nick',//input class-- 必填
goBtn:'go-btn-nick',//go btn class --必填
currentBtn:'active-nick'//當前按鈕class name --必填
});
</script>
</body>
</html>
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
如何解決jQuery EasyUI 已打開Tab重新加載問題
最近在項目中遇到這樣的需求，要求實現(xiàn)點擊左側已經打開的tab可以刷新重新加載datagrid。下面給大家分享實現(xiàn)代碼，一起看看吧2016-12-12
jQuery插件uploadify實現(xiàn)ajax效果的圖片上傳
本文主要介紹使用jQuery插件uploadify實現(xiàn)ajax效果的圖片上傳的功能，有需要的朋友可以參考一下。2016-06-06
下面小編就為大家?guī)硪黄猨query樹形菜單效果的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了使用jQuery管理選擇結果的相關資料,需要的朋友可以參考下2015-01-01
下面小編就為大家?guī)硪黄猨Query中each循環(huán)的跳出和結束實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了jQuery實現(xiàn)的簡單歌詞滾動功能,結合實例形式分析了基于jQuery插件scroll.js實現(xiàn)滾動功能相關操作技巧,涉及jQuery結合時間函數動態(tài)操作頁面元素相關實現(xiàn)方法,需要的朋友可以參考下2019-01-01
jquery如何獲取地址欄參數，改變地址欄樣式，接下來，通過本篇文章給大家分享jquery地址欄鏈接與a標簽鏈接匹配之特效代碼總結，需要的朋友可以參考下2015-08-08
jQuery Selector選擇器小結，需要的朋友可以參考下，都是一些常用的選擇控制方式。2010-05-05
使用jquery+iframe做一個ajax上傳效果(實例)
下面小編就為大家?guī)硪黄褂胘query+iframe做一個ajax上傳效果(實例)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
jQuery實現(xiàn)動態(tài)添加和刪除一個div
我想做一個可以動態(tài)添加刪除div的功能。中間遇到一個問題，最后在網友的熱心幫助下解決了，使用到的jquery方法和思想就是：事件的綁定和銷毀(unbind)2015-08-08