「分享」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();
        }
    }
});
原文地址:https://www.cnblogs.com/SeaSun/p/2213141.html