效果圖
需求場景
做公司后臺項目雷滋,后臺返回數(shù)據(jù)展示在頁面展示类缤,數(shù)據(jù)量很大臼勉,所以要采用分頁,點擊不同頁碼餐弱,ajax post當(dāng)前頁碼以及其它必要信息給后臺宴霸,返回該頁碼對應(yīng)的數(shù)據(jù)再動態(tài)展示到頁面,實現(xiàn)分頁局部刷新膏蚓。
思路
用一個div作為容器瓢谢,通過配置該div的屬性用js來動態(tài)生成需要的分頁。在需要用到分頁的地方驮瞧,只需要寫這樣一個div標(biāo)簽就OK了氓扛。像這樣:
<div class="test" pagination="p-new" pagenumber="5" totalnumber="15" paginationmax="10"></div>
配置的屬性包括:分頁的總頁數(shù)、分頁顯示的頁數(shù)论笔、當(dāng)前所在頁碼幢尚。分頁所需要的html元素
用js動態(tài)生成,樣式則采用bootstrap提供的分頁的基礎(chǔ)樣式翅楼。bootstrap提供的分頁的基礎(chǔ)樣式代碼可以生成一個靜態(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>
具體實現(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之前引入真慢,因為bootstrap所有的js插件都依賴bootstrap
定義3個配置項變量毅臊。定義動態(tài)生成分頁html結(jié)構(gòu)的函數(shù)initPagination,參數(shù)傳入一個dom對象,表示分頁的容器黑界。
//當(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);
// 顯示那幾個頁簽 傳入任意li元素即可
pageShow(element.children('ul').children('li[value = '+ pagenumber +']'))
}else{
console.log('分頁自定義屬性不合理')
}
};
寫一個函數(shù)用來調(diào)用上面的initPagination函數(shù)管嬉,不直接調(diào)用pagination時因為有可能一個頁面需要多個分頁。
// 凡是帶有pagination = p-new屬性的元素朗鸠,都會生成分頁蚯撩,這樣設(shè)計方便一個頁面中有多個不同的分頁
function paginationInit(){
$('[pagination = p-new]').each(function(){
initPagination($(this))
})
};
點擊不同頁簽時候的樣式變化。有兩種情況:如果點擊的是普通頁簽烛占,此時點擊誰就給誰對應(yīng)的li添加.active樣式胎挎。如果點擊的是首位的上一頁和下一頁,那么就
需要給當(dāng)前有.active的li元素的前一個或者后一個li添加.active樣式忆家。
// 點擊頁簽時候樣式的變化
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');
}
});
// 點擊頁碼頁簽
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');
// 點擊上一頁頁簽
}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');
}
// 點擊下一頁頁簽
}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');
}
}
}
接下來這個有點意思犹菇。展示哪些頁碼。比如總共100頁數(shù)據(jù)芽卿,我們的分頁欄始終顯示10頁揭芍,那么這10頁就需要動態(tài)的根據(jù)當(dāng)前頁、總頁數(shù)而變化卸例。我是找了一個其他的分頁點了點去找第幾頁的時候顯示哪些頁碼這個規(guī)律的称杨。
代碼看起來有點亂肌毅,不過自己找個其他網(wǎng)站的分頁點幾下就知道怎么寫了。
// 展示哪些頁碼 要用一個實際的分頁找規(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')
}
});
}
}
我給每個li頁簽綁定了一個專門用來處理ajax的點擊事件姑原,當(dāng)前所在的頁碼在全局可以獲取到悬而。可以處理切換頁簽時候發(fā)送ajax页衙,根據(jù)不同頁碼返回不同數(shù)據(jù)摊滔。
// 頁面切換時候的處理函數(shù)。比如發(fā)ajax根據(jù)不同頁碼獲取不同數(shù)據(jù)展示數(shù)據(jù)等店乐,用戶自行配置艰躺。
function processData(){
console.log('當(dāng)前頁碼',pagenumber);
// 用戶在這里寫頁碼切換時候的邏輯
}
一個簡單的通用分頁就完成了,引入js后只需要寫一個可配置屬性的div標(biāo)簽就可以實現(xiàn)bootstrap風(fēng)格的動態(tài)分頁眨八。還有很多地方需要完善腺兴,比如目前變量還聲明在全局等等,時間原因就先到此為止啦廉侧。
完整代碼我上傳到了github页响。https://github.com/yanhaoqi/pagination-bootstorp.git