jQuery翻页yunm.pager.js，涉及div局部刷新

前端的翻页插件有很多，bootstrap的翻页界面看起来就不错，做起来也易于上手，但应用于项目中的翻页实现还有有几个难点，分别是：

翻页的总体流程涉及到的知识点很多，这篇文章我们也主要来关注以上两点，其余的内容，请自悟。

一、如何定义局部刷新的p

翻页时，我们一般只会刷新页面中涉及到翻页的父级p，那么该如何定义呢？

// 根据form的target属性，获取需要分页的p，发起ajax请求。
$("form[target=turnPageForm]", $p).each(function() {
    var $this = $(this);
    YUNM.debug('form[target=turnPageForm]' + $this.selector);

    var rel = $this.attr("rel");
    var $box = $this.parent().find("#" + rel);

    if (rel) {
        $box.ajaxUrl({
            type : "POST",
            // 记录p的id
            url : $this.attr("action") + "?rel=" + rel,
            data : $this.serializeArray(),
            callback : function() {
            }
        });
    }
});

ajaxUrl : function(op) {
    var $this = $(this);

    $.ajax({
        type : op.type || 'GET',
        url : op.url,
        data : op.data,
        cache : false,
        success : function(response) {
            var json = YUNM.jsonEval(response);

            if (json[YUNM.keys.statusCode] == YUNM.statusCode.error) {
                if (json[YUNM.keys.message])
                    $.showErr(json[YUNM.keys.message]);
            } else {
                // ajax请求获取成功后，将局部刷新的内容放到p中
                $this.html(response).initUI();

                if ($.isFunction(op.callback))
                    op.callback(response);
            }
        },
        error : YUNM.ajaxError,
        statusCode : {
            503 : function(xhr, ajaxOptions, thrownError) {
                $.showErr("服务器当前负载过大或者正在维护!" || thrownError);
            }
        }
    });
},

页面首次加载的时候，我们将第一页的数据放到p中，这一步也很简单。

组件-yunmpagerjs">二、封装翻页组件 yunm.pager.js

完成第一步后，如何将翻页组件封装，就成为接下来的关键步骤了。

(function($) {
    $.fn.extend({
        pager : function(opts) {
            // 可参照bootstrap的翻页，为了获得前一页和后一页的按钮组件
            var setting = {
                prev$ : "li.previous",
                next$ : "li.next",
            };
            return this.each(function() {
                var $this = $(this);
                var pc = new Pager(opts);

                // 参照bootstrap翻页
                $this.html('<ul class="pager">' + '<li class="previous"><a href="#">&larr; 前一页</a></li>' + '<li class="next"><a href="#">后一页 &rarr;</a></li>'
                        + '</ul>');

                var $prev = $this.find(setting.prev$);
                var $next = $this.find(setting.next$);

                if (pc.hasPrev()) {
                    // 如果有前一页，绑定前一页事件
                    _bindEvent($prev, pc.getCurrentPage() - 1, pc.rel());
                } else {
                    // 否则置灰
                    $prev.addClass("disabled");
                }

                if (pc.hasNext()) {
                    _bindEvent($next, pc.getCurrentPage() + 1, pc.rel());
                } else {
                    $next.addClass("disabled");
                }

            });

            // 绑定点击事件，主要传递第几页
            function _bindEvent($target, pageNum, rel) {
                $target.bind("click", {
                    pageNum : pageNum
                }, function(event) {
                    yunmPageBreak({
                        rel : rel,
                        data : {
                            pageNum : event.data.pageNum
                        }
                    });
                    event.preventDefault();
                });
            }
        },

    });

    // 翻页的必要参数
    var Pager = function(opts) {
        this.opts = $.extend({
            rel : "", // 用于局部刷新p id号
            totalCount : 0,//总数
            numPerPage : 10,// 默认显示10个
            currentPage : 1,// 当前页
            callback : function() {
                return false;
            }
        }, opts);
    };

    $.extend(Pager.prototype, {
        rel : function() {
            return this.opts.rel;
        },
        // 每页显示多少个
        numPages : function() {
            return Math.ceil(this.opts.totalCount / this.opts.numPerPage);
        },
        // 当前页
        getCurrentPage : function() {
            var currentPage = parseInt(this.opts.currentPage);
            if (isNaN(currentPage))
                return 1;
            return currentPage;
        },
        // 能否向前翻页
        hasPrev : function() {
            return this.getCurrentPage() > 1;
        },
        // 向后翻页
        hasNext : function() {
            return this.getCurrentPage() < this.numPages();
        }
    });
})(jQuery);

三、翻页应用

封装了翻页组件后，我们来看看怎么使用。

$("p.turnPagePager", $p).each(function() {
    var $this = $(this);
    $this.pager({
        rel : $this.attr("rel"),
        totalCount : $this.attr("totalCount"),
        numPerPage : $this.attr("numPerPage"),
        currentPage : $this.attr("currentPage")
    });
});

四、效果