基于jquery.pagination.js實作的無重新整理加載分頁資料效果。
簡介與說明
* 該插件為Ajax分頁插件，一次性加載資料，故分頁切換時無重新整理與延遲。如果資料量較大，加載會比較慢。
* 分頁原理：資料總條數/每頁顯示數=分頁總頁碼
* 修改後，我們不用在第一次請求時将資料一次性加載完，而是按需加載。
簡單示例
html
<div id="page-box"></div>
js
$('.page-box').pagination({
totalData:100,
showData:5
coping:true
});
配置資訊
API接口
該插件的使用方法網上有很多詳細介紹，我就不一一舉例描述了。
介紹該插件的原因是我對它做了一些修改。改動不算大，隻能說是我用起來比較友善。
改動說明
在頁面上放一個隐藏的文本域，用來存放總頁數。
1.需要與後端約定好每頁顯示多少條資料，然後在後端統計總分頁數。在前端界面點選分頁時，隻需要通過ajax傳遞頁碼來加載資料。
2.前端也可以自己設定。後端傳回資料的總條數，前端可以自己計算總分頁數。該方法需要前端向後端發起分頁請求時，将每頁顯示多少條資料作為參數傳遞給後端。
修改後插件代碼
;(function($,window,document,undefined){
//配置參數
var defaults = {
current:1, //目前第幾頁,預設為第1頁
prevCls:'page_prev', //上一頁class
nextCls:'page_next', //下一頁class
prevContent:'<', //上一頁按鈕内容，可更改
nextContent:'>', //下一頁按鈕内容，可更改
activeCls:'active', //目前頁選中狀态
coping:false, //首頁和尾頁
homePage:'', //首頁節點内容
endPage:'', //尾頁節點内容
count:3, //目前頁前後分頁個數
jump:false, //跳轉到指定頁數
jumpIptCls:'jump-ipt', //文本框内容
jumpBtnCls:'jump-btn', //跳轉按鈕
jumpBtn:'跳轉', //跳轉按鈕文本
callback:function(){} //回調
};
var Pagination = function(element,options){
//全局變量
var opts = options,//配置
current,//目前頁
$document = $(document),
$obj = $(element);//容器
/**
* 擷取總頁數
* @return int pages 總頁數
*/
this.getTotalPage = function(){
var pages = $obj.siblings('input[type="hidden"]').val();
return pages;
};
//擷取目前頁
this.getCurrent = function(){
return current;
};
/**
* 動态填充分頁頁碼
* @param int index 頁碼
*/
this.filling = function(index){
var html = '';
current = index || opts.current;//目前頁碼
var pageCount = this.getTotalPage();
if(current > 1){//上一頁
html += '<a href="javascript:;" class="'+opts.prevCls+'">'+opts.prevContent+'</a>';
}else{
$obj.find('.'+opts.prevCls) && $obj.find('.'+opts.prevCls).remove();
}
if(current >= opts.count * 2 && current != 1 && pageCount != opts.count){
var home = opts.coping && opts.homePage ? opts.homePage : '1';
html += opts.coping ? '<a href="javascript:;" data-page="1">'+home+'</a><span>...</span>' : '';
}
var start = current - opts.count,
end = current + opts.count;
((start > 1 && current < opts.count) || current == 1) && end++;
(current > pageCount - opts.count && current >= pageCount) && start++;
for (;start <= end; start++) {
if(start <= pageCount && start >= 1){
if(start != current){
html += '<a href="javascript:;" data-page="'+start+'">'+ start +'</a>';
}else{
html += '<span class="'+opts.activeCls+'">'+ start +'</span>';
}
}
}
if(current + opts.count < pageCount && current >= 1 && pageCount > opts.count){
var end = opts.coping && opts.endPage ? opts.endPage : pageCount;
html += opts.coping ? '<span>...</span><a href="javascript:;" data-page="'+pageCount+'">'+end+'</a>' : '';
}
if(current < pageCount){//下一頁
html += '<a href="javascript:;" class="'+opts.nextCls+'">'+opts.nextContent+'</a>'
}else{
$obj.find('.'+opts.nextCls) && $obj.find('.'+opts.nextCls).remove();
}
html += opts.jump ? '<input type="text" class="'+opts.jumpIptCls+'"><a href="javascript:;" class="'+opts.jumpBtnCls+'">'+opts.jumpBtn+'</a>' : '';
$obj.empty().html(html);
};
//綁定點選事件
this.eventBind = function(){
var self = this;
var pageCount = this.getTotalPage();//總頁數
$obj.off().on('click','a',function(){
if($(this).hasClass(opts.nextCls)){
var index = parseInt($obj.find('.'+opts.activeCls).text()) + 1;
}else if($(this).hasClass(opts.prevCls)){
var index = parseInt($obj.find('.'+opts.activeCls).text()) - 1;
}else if($(this).hasClass(opts.jumpBtnCls)){
if($obj.find('.'+opts.jumpIptCls).val() !== ''){
var index = parseInt($obj.find('.'+opts.jumpIptCls).val());
}else{
return;
}
}else{
var index = parseInt($(this).data('page'));
}
self.filling(index);
typeof opts.callback === 'function' && opts.callback(self);
});
//輸入跳轉的頁碼
$obj.on('input propertychange','.'+opts.jumpIptCls,function(){
var $this = $(this);
var val = $this.val();
var reg = /[^\d]/g;
if (reg.test(val)) {
$this.val(val.replace(reg, ''));
}
(parseInt(val) > pageCount) && $this.val(pageCount);
if(parseInt(val) === 0){//最小值為1
$this.val(1);
}
});
//回車跳轉指定頁碼
$document.keydown(function(e){
var self = this;
if(e.keyCode == 13 && $obj.find('.'+opts.jumpIptCls).val()){
var index = parseInt($obj.find('.'+opts.jumpIptCls).val());
self.filling(index);
typeof opts.callback === 'function' && opts.callback(self);
}
});
};
//初始化
this.init = function(){
this.filling(opts.current);
this.eventBind();
};
this.init();
};
$.fn.pagination = function(parameter,callback){
if(typeof parameter == 'function'){//重載
callback = parameter;
parameter = {};
}else{
parameter = parameter || {};
callback = callback || function(){};
}
var options = $.extend({},defaults,parameter);
return this.each(function(){
var pagination = new Pagination(this, options);
callback(pagination);
});
};
})(jQuery,window,document);
更改後插件使用示例
<body>
<div class="page-box">
<input type="hidden" name="pageInput" value="1">
<div class="page1"></div>
</div>
<div class="page-box">
<input type="hidden" name="pageInput" value="10">
<div class="page2"></div>
</div>
<div class="page-box">
<input type="hidden" name="pageInput" value="10">
<div class="page3"></div>
<p>目前第<span class="now">1</span>頁</p>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.pagination.js"></script>
<script>
$(function(){
$('.page1').pagination({
coping:true,
count:2,
});
$('.page2').pagination({
coping:true,
count:2,
homePage:'首頁',
endPage:'末頁',
prevContent:'上頁',
nextContent:'下頁'
});
$('.page2').pagination({
coping:false,
count:2,
homePage:'首頁',
endPage:'末頁',
prevContent:'上頁',
nextContent:'下頁'
});
$('.page3').pagination({
coping:true,
count:2,
prevContent:'上頁',
nextContent:'下頁',
callback:function(options){
var page = options.getCurrent();
$('.now').text(page);
//這裡寫ajax請求。傳遞到後端的參數裡一定要有目前頁的頁碼喲。
}
});
});
</script>
</body>
頁面顯示截圖