JS重構分頁
很早以前寫過一個Jquery分頁元件，但是當時寫的元件有個缺點，當時的JS外掛是這樣設計的：比如：點選 --> 查詢按鈕 ---> 發ajax請求 返回總頁數和所有資料，然後拿到總頁數去呼叫我分頁程式碼，去計算共多少頁及顯示頁碼按鈕，然後在回撥成功後，再接著發Ajax請求，把所有的資料請求回來。這樣就有一個缺點，每次點選查詢按鈕後 會連續發2個AJAX請求，對我們前端效能肯定不友好。所以今天晚上對他們重新封裝了下，當然以前的邏輯沒有變，只是多加了一個配置項及幾行程式碼，初始化的時候換了一種方式初始化。如下JSFiddle：
JSFiddle地址如下：點選頁碼，然後使用火狐或者谷歌控制檯檢視我列印的資料，嘿嘿！
配置引數如下：
所有的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 += '<div 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 += "</div>"; // 把分頁放到容器裡面 $(_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); }); } });
第二種方式 優點：點選查詢按鈕後 只發一次請求 請求成功後 初始化分頁程式碼， 再接著寫點選某一頁的程式碼，因為還沒有點選 所以一開始時候只請求一次。