「分享」jquery 分頁樣式控件

 工作上的分享：分頁控件，先看效果圖，樣式可以自己調，通過參數的css類名；

但选 中的数字的中括号[]就不能改变了，

代码不好看；呵呵。。。

 

 

 

/** 分頁控件
* 「settings」json對象的參數說明：
** total:int    表示總記錄數；
** pagesize:int 表示每頁記錄數；
** pagelen:int  表示每次顯示的頁碼長度；
** parentClass：表示控件最外層的DIV的Class名稱；
** selectClass：表示當前選中頁的頁碼的Class名稱（樣式）；
** showFirPage：表示當數據不足一頁時，是否顯示分頁控件
* callback:表示點擊頁碼後的回調函數；回調的數據有兩個：function(obj,curindex){} obj則是分頁控件最外層div的jquery對象,curindex則是當前頁碼（從1開始）；
*/
jQuery.fn.extend({
    dcc2Page: function (settings, callback) {
        var defSetting = {
            total: 103,
            pagesize: 5,
            pagelen: 5,
            parentClass: "ajaxpage",
            selectClass: "selectpage",
            showFirPage: false
        };
        var opts = $.extend(defSetting, settings);
        $(this).html("");
        var _paeCount = Math.ceil(opts.total / opts.pagesize);
        var _showfirpage = opts.total > opts.pagesize * 1;//乘以1以防pagesize傳過來的是字符型數字
        if (opts.showFirPage || _showfirpage) {
            var getNextPageHtml = function (startindex, len) {
                var _pagehtml = "";
                if (len - startindex + 1 > opts.pagelen) { len = startindex + opts.pagelen - 1; }
                else
                    $("#nextmore").data("isnext", false);
                $("#premore").data("curFirstIndex", startindex);
                $("#nextmore").data("curLastIndex", len);
                for (i = startindex; i <= len; i++) {
                    _pagehtml += "<a>" + i + "</a>";
                }
                return _pagehtml;
            };
            var getPrevPageHtml = function (len) {
                var _pagehtml = "";
                var startindex = 1;
                if (len - opts.pagelen > 0) { startindex = len - opts.pagelen + 1; }
                else
                    $("#premore").data("isprev", false);
                $("#premore").data("curFirstIndex", startindex);
                $("#nextmore").data("curLastIndex", len);
                for (i = startindex; i <= len; i++) {
                    _pagehtml += "<a>" + i + "</a>";
                }
                return _pagehtml;
            };

            var setDelClass = function () {
                var _first_a = pageObj.find("a").eq(1);
                _first_a.addClass(opts.selectClass);
                _first_a.html("[" + _first_a.html() + "]");
            };
            var setPageClick = function (_firstindex) {
                $("#premore").nextUntil("#nextmore").click(function () {
                    if (typeof (callback) == 'function' && $(this).attr("class") != opts.selectClass) {
                        $(this).addClass(opts.selectClass).siblings().removeClass(opts.selectClass);
                        var curIndex = $(this).html();
                        var indexReg = /[\d+]/gi;
                        $(this).siblings().each(function (i) {
                            var temphtml = $(this).html();
                            if (indexReg.test(temphtml)) {
                                $(this).html(temphtml.match(indexReg).join(""));
                            }
                        });
                        $(this).html("[" + $(this).html() + "]");
                        callback(pageObj, curIndex);
                    }
                });
                if (_firstindex) {
                    if (typeof (callback) == 'function') {
                        callback(pageObj, _firstindex);
                    }
                }
            };

            var _html = "<div class='" + opts.parentClass + "'></div>";
            var pageObj = $(_html);
            pageObj.append("<a id='premore'><<</a>");
            pageObj.append(getNextPageHtml(1, opts.pagelen > _paeCount ? _paeCount : opts.pagelen));
            pageObj.append("<a id='nextmore'>>></a>");
            $(this).html(pageObj);
            setDelClass();

            if (_paeCount > opts.pagelen) {
                $("#nextmore").data("curLastIndex", opts.pagelen); //设置当前最后一个index数
                $("#nextmore").data("isnext", true);
                $("#nextmore").bind("click", function () {
                    if ($("#nextmore").data("isnext")) {
                        $(this).prevUntil("#premore").remove();
                        var _pagehtml = getNextPageHtml($(this).data("curLastIndex") + 1, _paeCount);
                        $(_pagehtml).insertBefore($(this));
                        setDelClass();
                        $("#premore").data("isprev", true);
                        setPageClick($("#premore").data("curFirstIndex"));
                    }
                }
            );
            }

            $("#premore").data("isprev", false);
            $("#premore").bind("click", function () {
                if ($(this).data("isprev")) {
                    $(this).nextUntil("#nextmore").remove();
                    var _pagehtml = getPrevPageHtml($(this).data("curFirstIndex") - 1);
                    $(_pagehtml).insertAfter($(this));
                    setDelClass();
                    $("#nextmore").data("isnext", true);
                    setPageClick($("#premore").data("curFirstIndex"));
                }
            });
            setPageClick();
        }
    }
});