JS重構分頁

JS重構分頁

     很早以前寫過一個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 += '<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);
            });
        }
});

第二種方式 優點：點擊查詢按鈕后 只發一次請求 請求成功后 初始化分頁代碼， 再接着寫點擊某一頁的代碼，因為還沒有點擊 所以一開始時候只請求一次。

DEMO下載