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下载