很早以前寫過一個Jquery分頁組件，但是當時寫的組件有個缺點，當時的JS插件是這樣設計的：比如：點擊 –> 查詢按鈕 —> 發ajax請求 返回總頁數和所有數據，然後拿到總頁數去調用我分頁代碼，去計算共多少頁及顯示頁碼按鈕，然後在回調成功後，再接著發Ajax請求，把所有的數據請求回來。這樣就有一個缺點，每次點擊查詢按鈕後 會連續發2個AJAX請求，對我們前端性能肯定不友好。所以今天晚上對他們重新封裝瞭下，當然以前的邏輯沒有變，隻是多加瞭一個配置項及幾行代碼，初始化的時候換瞭一種方式初始化。如下JSFiddle：
JSFiddle地址如下：點擊頁碼，然後使用火狐或者谷歌控制臺查看我打印的數據，嘿嘿！
配置參數如下：
container
'', 頁碼容器 默認為空 必填
perPage 10, 一頁多少條數據 默認情況下10條數據
curIndex 1, 當前的索引 從第幾開始 默認從第一頁開始
itemCount '' , 記錄總數 默認為空 必填 開發需要返回的
totalPages 0, 共多少頁 需要開發返回總數進行計算的
buttonAmount 10, 每頁顯示按鈕的數量
isAutoClick true, 上一頁 下一頁是否封裝在裡面作為點擊 默認為true 新增的參數。
所有的JS代碼如下：
復制代碼
function Pagination(){
this.config = {
container : '', // 頁碼容器
perPage : 10, // 一頁多少條數據 默認情況下10條數據
curIndex : 1, // 當前的索引 從第幾開始
itemCount : 100, // 記錄總數 默認設為100條
totalPages : 0, // 總頁數
buttonAmount : 10, // 每頁顯示按鈕的數量
isAutoClick : true // 上一頁 下一頁是否封裝在裡面作為點擊 默認為true
};
};
Pagination.prototype = {
constructor:Pagination,
init: function(customConfig,callback){
this.config = $.extend(this.config, customConfig || {});
var _self = this,
_config = _self.config;
_self._query(callback);
return this;
},
_query: function(callback){
var _self = this,
_config = _self.config;
var start,
end,
html = '',
str = '';
_self._calculate();
start = Math.max(1,_config.curIndex – parseInt(_config.buttonAmount/2));
end = Math.min(_config.totalPages,start + _config.buttonAmount – 1);
str += '<p class="PagerView">';
// 如果總頁數大於1的話
if(_config.totalPages > 1) {
if(_config.curIndex != 1) {
str += '<a href="javascript：//1"><span>|<</span></a>';
str += '<a href="javascript：//' + (_config.curIndex-1) + '"><span><<</span></a>';
}else {
str += '<span>|<</span>';
str += '<span><<</span>';
}
}
for(var i = start; i <= end; i+=1) {
if(i == _config.curIndex) {
str += '<span class="on">' + i + "</span>";
}else {
str += '<a href="javascript：//' + i + '"><span>' + i + "</span></a>";
}
}
if(_config.totalPages > 1){
if(_config.curIndex != _config.totalPages){
str += '<a href="javascript：//' + (_config.curIndex+1) + '"><span>>></span></a>';
str += '<a href="javascript：//' + _config.totalPages + '"><span>>|</span></a>';
}else{
str += '<span>>></span>';
str += '<span>>|</span>';
}
}
str += ' 一共' + _config.totalPages + '頁, ' + _config.itemCount + '條記錄 ';
str += "</p>";
// 把分頁放到容器裡面
$(_config.container).html(str);
if(_config.isAutoClick){
//點擊某一項分頁的時候
var a_list = $(_config.container + ' a');
for(var i=0; i<a_list.length; i++){
a_list[i].onclick = function(){
var index = $(this).attr('href');
if(index != undefined && index != ''){
index = parseInt(index.replace('javascript：//', ''));
_self.click(index,callback);
}
};
}
}
return this;
},
_getSelectValue: function(select){
var idx = select.selectedIndex, //獲取選中的索引
option,
value;
if(idx > -1) {
option = select.options[idx]; //獲取選中的option元素
console.log(option);
value = option.attributes.value;
return (value && value.specified) ? option.value : option.text;
}
return null;
},
click: function(index,callback) {
var _self = this,
_config = _self.config;
_config.curIndex = index;
_self._query(callback);
callback && $.isFunction(callback) && callback(_config);
return this;
},
/**
* 在顯示之前計算各種頁碼變量的值.
*/
_calculate: function(){
var _self = this,
_config = _self.config;
// 計算總頁數 = parseInt(Math.ceil(記錄總數/每頁多少條數據),10)
_config.totalPages = parseInt(Math.ceil(_config.itemCount/_config.perPage),10);
_self.curIndex = parseInt(_self.curIndex,10);
if(_self.curIndex > _config.totalPages) {
_self.curIndex = _config.totalPages;
}
}
};
復制代碼
調用的方式如下：
1. 第一種還是原來的初始化方式：也就是 isAutoClick參數默認為true 所有的點擊在分頁代碼內部做瞭處理，缺點：每次點擊查詢按鈕後 會連續發2次ajax請求。sAutoClick
var pager = new Pagination().init({
container: '#pager'
},function(cfg){
console.log(cfg);
});
2. 第二種初始化方式 是剛剛新增的，傳參isAutoClick false 然後實例化後 接著在外部調用click事件 做其他的事情，如下：
復制代碼
var pager = new Pagination().init({
container: '#pager',
isAutoClick: false
});
//點擊某一項分頁的時候
$("#pager").delegate('a','click',function(){
var curIndex = $(this).attr('href');
if(curIndex != undefined && curIndex != ''){
curIndex = parseInt(curIndex.replace('javascript：//', ''));
pager.click(curIndex,function(cfg){
console.log(cfg);
});
}
});
復制代碼
第二種方式 優點：點擊查詢按鈕後 隻發一次請求 請求成功後 初始化分頁代碼， 再接著寫點擊某一頁的代碼，因為還沒有點擊 所以一開始時候隻請求一次。
