效果圖
需求場景
做公司后臺(tái)項(xiàng)目，后臺(tái)返回?cái)?shù)據(jù)展示在頁面展示，數(shù)據(jù)量很大，所以要采用分頁，點(diǎn)擊不同頁碼，ajax post當(dāng)前頁碼以及其它必要信息給后臺(tái)，返回該頁碼對(duì)應(yīng)的數(shù)據(jù)再動(dòng)態(tài)展示到頁面，實(shí)現(xiàn)分頁局部刷新。
思路
用一個(gè)div作為容器，通過配置該div的屬性用js來動(dòng)態(tài)生成需要的分頁。在需要用到分頁的地方，只需要寫這樣一個(gè)div標(biāo)簽就OK了。像這樣：
<div class="test" pagination="p-new" pagenumber="5" totalnumber="15" paginationmax="10"></div>
配置的屬性包括：分頁的總頁數(shù)、分頁顯示的頁數(shù)、當(dāng)前所在頁碼。分頁所需要的html元素
用js動(dòng)態(tài)生成，樣式則采用bootstrap提供的分頁的基礎(chǔ)樣式。bootstrap提供的分頁的基礎(chǔ)樣式代碼可以生成一個(gè)靜態(tài)的分頁：
<ul class="pagination">
<li><a href="#">?</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="active"><a href="#">3</a></li>
<li class="disabled"><a href="#">?</a></li>
</ul>
具體實(shí)現(xiàn)
cdn引入jQuery和bootstrap
<link rel="stylesheet" >
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
注意，jQuery一定要在bootstrap之前引入，因?yàn)閎ootstrap所有的js插件都依賴bootstrap
定義3個(gè)配置項(xiàng)變量。定義動(dòng)態(tài)生成分頁html結(jié)構(gòu)的函數(shù)initPagination,參數(shù)傳入一個(gè)dom對(duì)象，表示分頁的容器。
//當(dāng)前頁數(shù)
var pagenumber;
//總頁數(shù)
var totalnumber;
//分頁欄顯示的頁數(shù)
var paginationmax;
paginationInit();
function initPagination(element){
pagenumber = Number(element.attr('pagenumber'));
totalnumber = Number(element.attr('totalnumber'));
paginationmax = Number(element.attr('paginationmax'));
if(totalnumber >= 1 && pagenumber <= totalnumber && paginationmax <= totalnumber){
var content =
"<ul class='pagination'>" +
"<li value='pre'>" +
"<a href='javascript:void(0);'>?</a>" +
"</li>";
for (var i = 0; i < totalnumber; i++) {
content +=
"<li value='"+ (i + 1) +"'>" +
"<a href='javascript:void(0);'>" + (i + 1) +
"</a>" +
"</li>"
}
content +=
"<li value='next'>" +
"<a href='javascript:void(0);'>?</a>" +
"</li>" +
"</ul>";
element.append(content);
// 為設(shè)置為當(dāng)前頁的頁簽添加樣式
element.children('ul').children('li[value = '+ pagenumber +']').addClass('active');
element.children('ul').children('li').click(clickChange);
element.children('ul').children('li').click(processData);
// 顯示那幾個(gè)頁簽 傳入任意li元素即可
pageShow(element.children('ul').children('li[value = '+ pagenumber +']'))
}else{
console.log('分頁自定義屬性不合理')
}
};
寫一個(gè)函數(shù)用來調(diào)用上面的initPagination函數(shù)，不直接調(diào)用pagination時(shí)因?yàn)橛锌赡芤粋€(gè)頁面需要多個(gè)分頁。
// 凡是帶有pagination = p-new屬性的元素，都會(huì)生成分頁，這樣設(shè)計(jì)方便一個(gè)頁面中有多個(gè)不同的分頁
function paginationInit(){
$('[pagination = p-new]').each(function(){
initPagination($(this))
})
};
點(diǎn)擊不同頁簽時(shí)候的樣式變化。有兩種情況：如果點(diǎn)擊的是普通頁簽，此時(shí)點(diǎn)擊誰就給誰對(duì)應(yīng)的li添加.active樣式。如果點(diǎn)擊的是首位的上一頁和下一頁，那么就
需要給當(dāng)前有.active的li元素的前一個(gè)或者后一個(gè)li添加.active樣式。
// 點(diǎn)擊頁簽時(shí)候樣式的變化
function clickChange(ev){
ev = event || window.event;
pageShow($(ev.target).parent());
$(ev.target).parent().parent().children('li').each(function(index,item){
if($(item).hasClass('active')){
$(item).removeClass('active');
}
});
// 點(diǎn)擊頁碼頁簽
if($(ev.target).parent().attr('value') != 'pre' && $(ev.target).parent().attr('value') != 'next'){
pagenumber = Number($(ev.target).parent().attr('value'))
$(ev.target).parent().addClass('active');
$(ev.target).parent().parent().children('li[value = pre]').removeClass('disabled');
$(ev.target).parent().parent().children('li[value = next]').removeClass('disabled');
// 點(diǎn)擊上一頁頁簽
}else if($(ev.target).parent().attr('value') == 'pre'){
pagenumber -= 1;
if(pagenumber <= 1){
pagenumber = 1;
$(ev.target).parent().parent().children('li[value = 1]').addClass('active');
$(ev.target).parent().parent().children('li[value = pre]').addClass('disabled');
}else{
$(ev.target).parent().parent().children('li[value = '+ pagenumber.toString() +']').addClass('active');
$(ev.target).parent().parent().children('li[value = pre]').removeClass('disabled');
$(ev.target).parent().parent().children('li[value = next]').removeClass('disabled');
}
// 點(diǎn)擊下一頁頁簽
}else if($(ev.target).parent().attr('value') == 'next'){
pagenumber += 1;
if(pagenumber >= totalnumber){
pagenumber = totalnumber;
$(ev.target).parent().parent().children('li[value = '+ totalnumber +']').addClass('active');
$(ev.target).parent().parent().children('li[value = next]').addClass('disabled');
}else{
$(ev.target).parent().parent().children('li[value = '+ pagenumber.toString() +']').addClass('active');
$(ev.target).parent().parent().children('li[value = next]').removeClass('disabled');
$(ev.target).parent().parent().children('li[value = pre]').removeClass('disabled');
}
}
}
接下來這個(gè)有點(diǎn)意思。展示哪些頁碼。比如總共100頁數(shù)據(jù)，我們的分頁欄始終顯示10頁，那么這10頁就需要?jiǎng)討B(tài)的根據(jù)當(dāng)前頁、總頁數(shù)而變化。我是找了一個(gè)其他的分頁點(diǎn)了點(diǎn)去找第幾頁的時(shí)候顯示哪些頁碼這個(gè)規(guī)律的。
代碼看起來有點(diǎn)亂，不過自己找個(gè)其他網(wǎng)站的分頁點(diǎn)幾下就知道怎么寫了。
// 展示哪些頁碼 要用一個(gè)實(shí)際的分頁找規(guī)律
function pageShow(element){
if(Number(pagenumber) >= 1 && Number(pagenumber) <= parseInt(.5 * Number(paginationmax))){
element.parent().children('li').each(function(index,item){
if(Number($(item).attr('value')) >= 1 + Number(paginationmax) && Number($(item).attr('value')) <= Number(totalnumber)){
$(item).css('display','none')
}else{
$(item).css('display','inline-block')
}
});
}else if(Number(pagenumber) > parseInt(.5 * Number(paginationmax)) && Number(pagenumber) <= Number(totalnumber) - parseInt(.5 * Number(paginationmax))){
element.parent().children('li').each(function(index,item){
if((Number($(item).attr('value')) >= 1 && Number($(item).attr('value')) <= Number(pagenumber) - parseInt(.5 * Number(paginationmax))) || (Number($(item).attr('value')) > Number(pagenumber) + parseInt(.5 * Number(paginationmax)) && Number($(item).attr('value')) <= Number(totalnumber))){
$(item).css('display','none')
}else{
$(item).css('display','inline-block')
}
});
}else if(Number(pagenumber) > Number(totalnumber) - parseInt(.5 * Number(paginationmax))){
element.parent().children('li').each(function(index,item){
if(Number($(item).attr('value')) >= 1 && Number($(item).attr('value')) <= Number(totalnumber) - Number(paginationmax)){
$(item).css('display','none')
}else{
$(item).css('display','inline-block')
}
});
}
}
我給每個(gè)li頁簽綁定了一個(gè)專門用來處理ajax的點(diǎn)擊事件，當(dāng)前所在的頁碼在全局可以獲取到。可以處理切換頁簽時(shí)候發(fā)送ajax，根據(jù)不同頁碼返回不同數(shù)據(jù)。
// 頁面切換時(shí)候的處理函數(shù)。比如發(fā)ajax根據(jù)不同頁碼獲取不同數(shù)據(jù)展示數(shù)據(jù)等，用戶自行配置。
function processData(){
console.log('當(dāng)前頁碼',pagenumber);
// 用戶在這里寫頁碼切換時(shí)候的邏輯
}
一個(gè)簡單的通用分頁就完成了，引入js后只需要寫一個(gè)可配置屬性的div標(biāo)簽就可以實(shí)現(xiàn)bootstrap風(fēng)格的動(dòng)態(tài)分頁。還有很多地方需要完善，比如目前變量還聲明在全局等等，時(shí)間原因就先到此為止啦。
完整代碼我上傳到了github。https://github.com/yanhaoqi/pagination-bootstorp.git
