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

推荐阅读更多精彩内容