jQuery教程  分页插件详解

背景

　　找到一款自认为不错的分页组件，《js版的QuickPager分页控件 V2.0》，想下载完整的资源，js/css等,不过找了一会，没找到，联系博主也没有回复。那直接看了页面引用了js文件，下载下来改写了一下jQuery教程 ，同时借此机会进一步掌握封装jquery组件。虽说有重复造轮子之嫌，不过只有重复造了轮子，才能更好的掌握。不是曾经有位大神说过，“看再多的框架，不如亲自动手写一个框架。。。”

　　先上个图看看效果。

插件实现

　　先看看调用方式。

    $(".pager").pagination({

        recordCount: 3211,       //总记录数

        pageSize: 10,           //一页记录数

        onPageChange: function (pageIndex) {

            document.title = pageIndex;

        }

    });

　　这个是插件的初始化方法。完整的分页控件html元素代码如下：

共102条记录

        第1/11页

        每页10条记录

        首页

        上一页

        下一页

        末页

        GO

　　而在实际的过程中，可能需求不同，有点只需要显示分页按钮，有的不需要显示 总共多少页，总有多少条记录，或者有的只需要显示分页导航数字。那么在定义分页元素的时候，可以自定义，如果未定义任何元素，则插件自动填充完整的html代码至div中。

　　初始化的时候会遍历内部的元素，找到对应的按钮添加事件。在按钮的事件处理完毕后，会判断是否有导航页的容器，如果存在，则根据当前页码基于某种算法生成几个页码导航栏。大致就是这些内容了。

　　此外，楼主还想添加一个方法，直接切换到指定的页码。在这里的时候遇到一个问题，之前在插件内部定义了一个变量来存储分页按钮的相关对象，后来发现当想在页面上实例化多个分页插件的时候，遇到问题了，变量公用了有冲突。 

　　于是增加了一个私有方法,将分页所有实现放置在该方法中，分页对象最后保存在this对象的属性上，便于后面可以访问，以便于增加事件处理。

(function($){

    $.initPagination = function(info){

        ...

    }

    $.fn.pagination = function (pagerInfo) {

        this.each(function () {

            $.initPagination.call(this, pagerInfo);

        });

    }

    $.fn.PageChanged = function (pageIndex) {

        this[0].pager && this[0].pager.PageChanged.call(this, pageIndex);

    };

}(jQuery));

　　pager对象就是存储在分页容器中，包含了分页的所有处理。

　　写到这里，感觉进一步加强了写jquery插件的能力。

　　完整实现如下:

(function ($) {

    $.initPagination = function (info) {

        var $div = $(this);

        var pager = {

            $first: null,//首页按钮

            $prev: null,//上一页按钮

            $nav: null,//导航区按钮

            $next: null,//下一页按钮

            $last: null,//末页按钮

            $goNum: null,//翻页文本输入框

            $go: null,//翻页按钮

            $recordCount: null,//总行数

            $pageIndex: null,//当前页号

            $pageCount: null,//总页数

            $pageSize: null,//页码数

            Init: function () { //初始化控件 缓存

                $div.find("[name]").each(function () {

                    var name = $(this).attr("name");

                    if (name && name.length) {

                        pager["$" + name] = $(this);

                    }

                });

                pager.SetPageUI();

            },

            //创建导航

            CreateNavi: function () {

                //页号导航

                if (!pager.$nav) return;

                var n1 = "{text}";

                var navi = pager.$nav;

                navi.empty();

                var i; var temp = ""; var s1; var s2;

                var naviCount2 = (info.naviCount % 2) == 1 ? info.naviCount / 2 | 0 : info.naviCount / 2;

                if ((info.thisPageIndex - naviCount2) < 1) {

                    s1 = 1; s2 = info.naviCount;

                } else if ((info.thisPageIndex + naviCount2) >= info.pageCount) {

                    s1 = info.pageCount - info.naviCount + 1;

                    s2 = info.pageCount;

                    if (s1 < 1) s1 = 1;

                } else {

                    s1 = info.thisPageIndex - naviCount2;

                    s2 = info.thisPageIndex + naviCount2;

                    if (s2 > info.pageCount) s2 = info.pageCount;

                }

                if (s2 > info.pageCount) s2 = info.pageCount;

                if (s1 >= 2) {

                    temp = n1.replace("{text}", 1);

                    navi.append(temp);

                }

                if (s1 >= 3) {

                    temp = n1.replace("{text}", "…");

                    navi.append(temp);

                }

                for (i = s1; i <= s2; i++) { //当前页

                    temp = n1.replace("{text}", i == info.thisPageIndex ? "" + i + "" : i);

                    navi.append(temp);

                }

                if (s2 <= info.pageCount - 2) {

                    temp = n1.replace("{text}", "…");

                    navi.append(temp);

                }

                if (s2 <= info.pageCount - 1) {

                    temp = n1.replace("{text}", info.pageCount);

                    navi.append(temp);

                }

                //注册事件

                var naviA = navi.find("a");

                naviA.each(function (j) {

                    $(this).on('click', function () {

                        info.beforePageIndex = info.thisPageIndex;

                        if (this.innerHTML == "…") {

                            var a1 = naviA[j - 1];

                            if (a1.innerHTML == "1") {

                                //前面的，取后面的作为页号

                                a1 = naviA[j + 1];

                                info.thisPageIndex = $(a1).text() * 1 - 1;

                            } else {

                                //后面的，取前面的作为页号

                                a1 = naviA[j - 1];

                                info.thisPageIndex = $(a1).text() * 1 + 1;

                            }

                        } else {

                            info.thisPageIndex = $(this).text();

                        }

                        //页码未变更则不触发事件

                        if (info.beforePageIndex == info.thisPageIndex) return;

                        pager.PageChanged();

                    });

                });

            },

            //设置UI

            SetPageUI: function () {

                if (info.pageCount == -1) {

                    //计算总页数

                    info.pageCount = info.recordCount % info.pageSize === 0 ? info.recordCount / info.pageSize : parseInt(info.recordCount / info.pageSize) + 1;

                }

                pager.$recordCount && pager.$recordCount.html(info.recordCount);

                pager.$pageIndex && pager.$pageIndex.html(info.thisPageIndex);

                pager.$pageCount && pager.$pageCount.html(info.pageCount);

                pager.$pageSize && pager.$pageSize.html(info.pageSize);

                pager.$goNum && pager.$goNum.val(info.thisPageIndex);

                $div.find("span").css("cursor", "pointer");

                switch (parseInt(info.thisPageIndex)) {

                    case 1:

                        //第一页

                        pager.$first && pager.$first.hide().css("cursor", "default");

                        pager.$prev && pager.$prev.hide().css("cursor", "default");

                        pager.$next && pager.$next.show().css("cursor", "pointer");

                        pager.$last && pager.$last.show().css("cursor", "pointer");

                        break;

                    case info.pageCount:

                        //最后一页

                        pager.$first && pager.$first.show().css("cursor", "pointer");

                        pager.$prev && pager.$prev.show().css("cursor", "pointer");

                        pager.$next && pager.$next.hide().css("cursor", "default");

                        pager.$last && pager.$last.hide().css("cursor", "default");

                        break;

                    default:

                        //不是第一页、最后一页

                        pager.$first && pager.$first.show().css("cursor", "pointer");

                        pager.$prev && pager.$prev.show().css("cursor", "pointer");

                        pager.$next && pager.$next.show().css("cursor", "pointer");

                        pager.$last && pager.$last.show().css("cursor", "pointer");

                        break;

                }

            },

            //设置缺省设置

            SetDefaultInfo: function (pSet) {

                var defaultSetting = {

                    recordCount: -1,        //总记录数

                    pageSize: 10,           //一页记录数

                    pageCount: -1,          //总页数，不用设置，根据上两个条件自动计算

                    thisPageIndex: 1,       //当前页号

                    beforePageIndex: 1,     //上一次的页号

                    //lastPageIndex: 0,     //最后一页的页号，自动计算

                    naviCount: 7,            //页号导航的数量

                    isUseRecordCount: true,   //是否使用缓存的总记录数

                    //分页控件模板的路径和文件名

                    templetPath: "pager",

                };

                return $.extend(defaultSetting, pSet);

            },

            //注册翻页的事件，不包括页号导航

            RegPagerEvent: function () {

                pager.$first && pager.$first.on('click', function () {

                    if (info.thisPageIndex != 1) {

                        addEvent("a");

                    }

                });

                pager.$prev && pager.$prev.on('click', function () {

                    if (info.thisPageIndex != 1) {

                        addEvent("-");

                    }

                });

                pager.$next && pager.$next.on('click', function () {

                    if (info.thisPageIndex != info.pageCount) {

                        addEvent("+");

                    }

                });

                pager.$last && pager.$last.on('click', function () {

                    if (info.thisPageIndex != info.pageCount) {

                        addEvent("z");

                    }

                });

                pager.$go && pager.$go.on('click', function () {

                    addEvent("go");

                });

                var addEvent = function (kind) {

                    info.beforePageIndex = info.thisPageIndex;

                    switch (kind) {

                        case "a": info.thisPageIndex = 1; break; //首页

                        case "z": info.thisPageIndex = info.pageCount; break; //末页

                        case "+": info.thisPageIndex = info.thisPageIndex * 1 + 1; break; //下页

                        case "-": info.thisPageIndex = info.thisPageIndex * 1 - 1; break; //上页

                        case "go": info.thisPageIndex = pager.$goNum.val(); break; //go                     }

                    pager.PageChanged();

                };

            },

            //页面变更事件

            PageChanged: function (pIndex) {

                if (pIndex) info.thisPageIndex = pIndex;

                //如果页码错误 则中断

                if (isNaN(info.thisPageIndex)) {

                    alert("页码不正确");

                    return;

                }

                info.thisPageIndex = parseInt(info.thisPageIndex);

                //判断范围

                if (info.thisPageIndex > info.pageCount) info.thisPageIndex = info.pageCount;

                if (info.thisPageIndex < 1) info.thisPageIndex = 1;

                info.onPageChange && info.onPageChange.call(info, info.thisPageIndex);

                pager.SetPageUI(); //重新设置UI                pager.CreateNavi();

                //克隆

                //var tmpdiv = info.pageTurnDivIDs.split(",");

                //var pageHtml = $("#" + tmpdiv[0]).clone(true);

                //for (var i = 1; i < tmpdiv.length; i++) {

                //    $("#" + tmpdiv[i]).html(pageHtml);

                //}            }

        };

        //设置默认值

        info = pager.SetDefaultInfo(info);

        //如果模板没有自定义 则自动填充

        var html = $div.html();

        if (!/\w+/.test(html)) {

            html = '共102条记录   第1/11页    每页10条记录    首页上一页  1下一页  末页       GO';

            $div.html(html);

        }

        //增加样式

        if (!$div.hasClass("pager")) $div.addClass("pager");

        //初始化 缓存控件        pager.Init();

        //注册事件（仅限上一页、下一页、首页、末页，不包括页号导航）        pager.RegPagerEvent();

        //创建导航 并增加导航事件        pager.CreateNavi();

        this.pager = pager;

        return this;

    }

    $.fn.pagination = function (pagerInfo) {

        this.each(function () {

            $.initPagination.call(this, pagerInfo);

        });

    }

    $.fn.PageChanged = function (pageIndex) {

        this[0].pager && this[0].pager.PageChanged.call(this, pageIndex);

    };

}(jQuery));

插件目的

　　插件不是为了模仿那些grid组件，而是提供一个分页导航的功能，类似当初做Asp.Net的时候用的经典插件，AspNetPager。控件旨在提供分页按钮以及导航UI的控制，而具体的处理逻辑，如显示table数据，则只用监听其PageChanged事件即可。

希望这篇文章可以帮助到你。总之，同学们，你想要的职坐标IT频道都能找到!