jQuery分页插件

开发背景

最近接了一个小型电商网站，各大商品分类都需要用到分页的技巧，虽说我只是个后台汪，但是不想搞前端的后台不是一个好开发。参考了网上的某个简单的分页插件，重新封装了下，支持ajax请求，data参数传递，分页请求回调，真的很好用呢~

最终目的

既然是开发插件，那么使用一定要简单粗暴，类似easyui datagrid这样：

$('#dg').datagrid({
    url:'datagrid_data.json',
    columns:[[
        {field:'code',title:'Code',width:100},
        {field:'name',title:'Name',width:100},
        {field:'price',title:'Price',width:100,align:'right'}
    ]]
});

所以我大概构思了下，我的page插件应该是这样的：

$(".test").page({
    'url': '/data.json',
    'maxShowItem': 7,
        'data': {
        'limit': 6,
        'attr': 'attr'
    },
    'currentClass': 'currentPage',
    'activeClass': 'active',
    'disabledClass': 'disabled',
    'callback': function(currentPage, pageCount, obj){
        // 处理分页内容
        console.log(currentPage, pageCount, obj);
    }
});

url是分页查询的请求地址，maxShowItem则是最多显示多少分页按钮，data为每次ajax请求的参数，callback即是请求成功的回调，形参为当前页码currentPage，总页数pageCount，和当前页内容（总共结果数count，单页数据集result）。

效果图示

效果图示

模仿着网易云音乐做的，然后有几个关键点，我都用红线标记出来了，大概说下各个标记和重要单位的意思：

1. left/right，即左右分页省略临界点；
2. unit，即是currentPage两边各分布着几个分页按钮（不含首尾页）；

这就是一个分页模型，当然实际开发中存在着许多条件因素，需要逐步来看。

即刻动手

这里推荐个jQuery插件编写教程的地址：http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html

首先定义Page插件的构造函数：

// 定义Page的构造函数
var Page = function(ele, opt){
    this.$ele = ele;
    var defaults = {
        // 分页ajax地址
        'url': '',
        // 最多展示分页按钮数
        'maxShowItem': 7,
        // ajax请求默认参数
        'data': {
            'start': 0,
            'limit': 10
        },
        // 当前页码class名称
        'currentClass': '',
        // 激活的页码class名称
        'activeClass': '',
        // 失效的页码class名称
        'disabledClass': '',
        // 省略class名称
        'ellipsis': '',
        // 请求回调，当前页码，总页码数，当前页码内容（当页结果result，数据总数count）
        'callback': null
    };
    this.opt = $.extend({}, defaults, opt);
};

然后拓展Page的方法：

// 定义Page的方法
Page.prototype = {
    'ajax': function(currentPage){
        var data = this.opt.data;
        var page = this;
        data.start = (currentPage - 1) * data.limit;
        $.ajax({
            'url': this.opt.url,
            'type': 'get',
            'dataType': 'json',
            'data': data,
            'success': function(obj){
                var pageCount = Math.ceil(obj.count / data.limit);
                page.resetPageItem(currentPage, pageCount);
                page.opt.callback(currentPage, pageCount, obj);
            },
            'error': function(XMLHttpRequest, textStatus, errorThrown){
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    },
    // 重置分页item（第一次，和每次item点击都会触发）
    'resetPageItem': function(currentPage, pageCount) {
        var page = this;
        var pageItem = this.getPageItem(currentPage, pageCount);
        this.$ele.html(pageItem);
        // 为每个item绑定点击事件
        this.$ele.children('a[class=\'' + this.opt.activeClass + '\']').on('click',function(){
            var $this = $(this);
            var currentPage = parseInt($this.attr('page-data'));
            page.ajax(currentPage);
        });
    },
    // 根据总页数和当前页数，得到分页item的html内容
    'getPageItem': function(currentPage, pageCount){
        var prePage = currentPage - 1;
        var nextPage = currentPage + 1;
        var prePageClass = this.opt.activeClass;
        var nextPageClass = this.opt.activeClass;
        if (prePage <= 0) {
            prePageClass = this.opt.disabledClass;
        }
        if (nextPage > pageCount) {
            nextPageClass = this.opt.disabledClass;
        }
        var appendStr = '';
        // appendStr += '<a href=\'#\' class=\'' + prePageClass + '\' page-data=\'1\'' + '>首页</a>';
        appendStr += '<a href=\'#\' class=\'' + prePageClass + '\' page-data=\''+ prePage +'\'>< 上一页</a>';
        
        var unit = (this.opt.maxShowItem - 3) / 2;
        // 左边临界
        var left = currentPage - unit;
        // 右边临界
        var right = currentPage + unit;
        
        if(left <= 1){
            right = this.opt.maxShowItem - 1;
        }
        if(right >= pageCount){
            left = pageCount - (this.opt.maxShowItem - 2);
        }
        
        var leftEllipsis = false;
        var rightEllipsis = false;
        
        for (var i = 1; i <= pageCount; i++) {
            var itemPageClass = this.opt.activeClass;
            // 左侧省略号
            if(i > 1 && i < left){
                if(!leftEllipsis){
                    itemPageClass = this.opt.ellipsis;
                    appendStr+='<span class=\'' + itemPageClass + '\'>...</span>';
                    leftEllipsis = true;
                }
                continue;
            }
            // 右侧省略号
            if(i < pageCount && i > right){
                if(!rightEllipsis){
                    itemPageClass = this.opt.ellipsis;
                    appendStr+='<span class=\'' + itemPageClass + '\'>...</span>';
                    rightEllipsis = true;
                }
                continue;
            }
            if(i == currentPage){
                itemPageClass = this.opt.currentClass;
            }
            appendStr+='<a href=\'#\' class=\'' + itemPageClass + '\' page-data=\'' + i + '\'>' + i + '</a>';
        }
        appendStr += '<a href=\'#\' class=\'' + nextPageClass + '\' page-data=\'' + nextPage + '\'>下一页 ></a>';
        // appendStr += '<a href=\'#\' class=\'' + nextPageClass + '\' page-data=\'' + pageCount + '\'>尾页</a>';
        return appendStr;
    }
};

这里要讲述下，我拓展了Page的三个方法，分别是

1. ajax：点击一个active的分页按钮发起一个ajax请求，请求成功回调中初始化分页按钮items，同时调用Page构造方法参数中的callback；
2. resetPageItem：通过当前页currentPage和总页数pageCount，获取分页按钮items的html内容，重置分页按钮items，同时对active的item绑定好click的ajax事件；
3. getPageItem：获取分页按钮items的html内容，其实这个也可以写到resetPageItem中，只不过个人觉得生成html的逻辑有点复杂，可以和items的click绑定分开；

最后就是拓展jQuery的方法，使用Page对象：

// 在插件中使用Page对象
$.fn.page = function(opt){
    var page = new Page(this, opt);
    // 初次加载
    page.ajax(1);
};

加上命名空间，防止变量污染：

;(function(){
    // 插件代码
})(jQuery);

这样我们就编写完了整个分页控件，即可像最终目的中的那样，使用一个div的简单配置就能够一键实现ajax的分页功能，第一次自己编写呢，成就感爆棚啊~~

开源地址

https://github.com/caojiantao/page