项目中的分页插件

在项目中，一旦数据多了的话，用到分页就是一个非常常见的功能了，网上有很多的分页插件，，有好友坏， 下面是我们现在用到的自己写的一个分页插件~  挺好用！

项目中是用requie去加载插件的~  首先看下插件的代码~  内容不多~

;(function($) {


    $.fn.tPaginator = function(options) {

        if(this.length == 0) return this;

        // 支持批量操作
        if(this.length > 1){
            this.each(function(){$(this).tPaginator(options)});
            return this;
        }

        var self = this;                         // 容器


        /**
         * ===================================================================================
         * = 定义变量
         * ===================================================================================
         */
        
        var size = 7;                            // 组件显示的最多页码数量，只能是奇数

        var config = {

            current: 0,                            // 当前页码
            pageCount: 0,                        // 总页数
            callback: function() {}                // 回调函数

        };



        /**
         * ===================================================================================
         * = 定义函数
         * ===================================================================================
         */
        

        /**
         * 初始化
         */
        var init = function() {

            // 布局
            layout(options);

            if (!self.hasClass('t-paginator')) {
                self.addClass('t-paginator');
            }

            bindEvent();
        }


        /**
         * 布局
         */
        var layout = function(_options) {

            // 更新配置参数
            config = $.extend(config, _options);

            // 存放代码
            var html = '';

            // 总页数不超过一页时让组件隐藏
            if (config.pageCount <= 1) {
                self.addClass('t-hide');
                return false;
            } else {
                self.removeClass('t-hide');
            }

            // 组合“上一页”
            html += '<a class="'+ (config.current == 1 ? 't-disabled' : '') +'" href="javascript:;" data-type="prev">上一页</a>';

            if (config.pageCount <= size) {

                for (var i = 1; i <= config.pageCount; i++) {
                    html += getCode(i);
                }

            } else {

                if (config.current > size / 2 + 1) {
                    html += '<a class="t-page-num" href="javascript:;" data-type="num" data-num="1">1</a><span class="t-page-dot">...</span>';
                }

                var _start, _end;

                if (config.current < size / 2 + 1) {
                    _start = 1;
                    _end = size;
                } else if(config.current > config.pageCount - size / 2){
                    _start = config.pageCount - size + 2;
                    _end = config.pageCount + 1;
                } else {
                    _start = config.current - (size - 3) / 2;
                    _end = config.current + (size - 1) / 2;
                }

                for (var i = _start; i < _end; i++) {
                    html += getCode(i);
                }

                if (config.current < config.pageCount - size / 2) {
                    html += '<span class="t-page-dot">...</span><a class="t-page-num" href="javascript:;" data-type="num" data-num="'+ config.pageCount +'">'+ config.pageCount +'</a>';
                }


            }

            html += '<a class="'+ (config.current == config.pageCount ? 't-disabled' : '') +'" href="javascript:;" data-type="next">下一页</a>';

            // 添加代码
            self.html(html);

        }


        /**
         * 拼凑代码
         */
        var getCode = function(i) {

            var _html = '';

            if (config.current == i)
                _html = '<i class="t-current">'+ i +'</i>';
            else
                _html = '<a class="t-page-num" href="javascript:;" data-type="num" data-num="'+ i +'">'+ i +'</a>';

            return _html;

        }


        /**
         * 事件定义
         */
        function bindEvent() {

            self.find('a').on('click', function() {
                
                var $this = $(this);
                var type = $this.data('type');

                switch(type) {

                    case 'num':
                        var num = parseInt($this.data('num'));
                        config.current = num;
                        config.callback(config.current);
                        break;

                    case 'prev':
                        if (!$this.hasClass('t-disabled')) {
                            config.current--;
                            config.callback(config.current);
                        }
                        break;

                    case 'next':
                        if (!$this.hasClass('t-disabled')) {
                            config.current++;
                            config.callback(config.current);
                        }
                        break;

                    default:
                        break;

                }


            });

        }






        init();

        // 返回jQuery对象本身
        return this;

    }

})(jQuery);

使用中，引用这个jquery插件就可以了， 然后是调用的JS代码，一下方式是基于ejs数据模板的方式

define([
'text!../../templates/set-team.ejs',

'global',
'tPage',
'ejs',

], function(teamTmp) {  //require的define参数，可忽略

/* 初始化 */
    _team.init = function() {
        _team.method.template(1, teamTmp); //初始化执行  teamTmp为我们要分页列表的数据模板，可以自己定义，在requiere中有引用

    }

        /* 方法List */
    _team.method = {
        //列表模板渲染
        template: function(thisPage, temp) {
            var _self = this,
                _unit = 10;
            var reqData = {  //参数
                pageIndex: thisPage,
                pageSize: _unit
            };
            _team.params.pageIndex = thisPage;
            $.ajax({
                    url: '/Enterprise/GetUsersPager',
                    type: 'post',
                    dataType: 'json',
                    data: reqData
                })
                .done(function(data) {
                    if (data.flag == 1) {
                        $('#team-table').html(ejs.render(temp, data.data));  //渲染模板
                        if ($('.team-table').find('tbody>tr:eq(0)').hasClass('admin')) {
                            _team.params.adminId = $('.admin').data('id');
                        }
                        if ($('.team-tr').length == 1 && thisPage == 1) {
                            $('.btn-admin').addClass('no-admin');
                        }
                        //点击下一页事件回调 
                        $('#page').tPaginator({
                            current: thisPage, // 设置当前页
                            pageCount: Math.ceil(data.data.total / _unit), // 设置总页数
                            callback: function(thisPage) {
                                _team.method.template(thisPage, teamTmp);
                            }
                        });
                    }else{
                        $('#team-table').html(ejs.render(temp, {
                            data: data.data
                        }));
                    }
                })
                .fail(function() {
                    showPrompt("你的网络好像不太给力<br/>请稍候再试", 'error');
                })

        }
    }

调用JS定义好之后，就是页面的结构了~~

<div class="team-table" id="team-table">  //需要渲染的列表
    <div class="load-data">
        <i class="iconfont icon-sousuo"></i>正在努力加载...
    </div>
</div>
<!-- 分页 -->
<div id="page"></div>

为了一步到位，把CSS也引入进来~~

.t-paginator {
    text-align: right;
    color: #666;
    font-size: 14px;
}

.t-paginator.t-hide {
    display: none;
}

.t-paginator a, .t-paginator .t-current {
    display: inline-block;
    color: #666;
    margin: 0 5px;
    padding: 6px 10px;
    text-align:center;
    vertical-align: baseline;
    background-color: #FFF;
    border: 1px solid #CCC;
}
.t-paginator .t-current ,.t-paginator  .t-page-num{
    min-width: 36px
}

.t-paginator .t-current {
    background-color: #329BFF;
    color: #fff;
    border: 1px solid #329BFF;
}

.t-paginator a:hover {
    background-color: #eee;
}

.t-paginator a.t-disabled {
    color: #999;
    cursor: not-allowed;
}

.t-paginator a.t-disabled:hover {
   background-color: #ddd;
}

.t-paginator .t-paginator-dot {
    display: inline-block;
    font-size: 20px;
    margin: 0 5px;
}

简单的三个小步骤， 分页就解决了~~