zoukankan      html  css  js  c++  java
  • 「分享」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();
            }
        }
    });
  • 相关阅读:
    数据库的查询优化技术(转载)
    数据库查询优化方案(处理上百万级记录如何提高处理查询速度)(转载)
    oracle 游标使用详解
    MySQL-linux系统下面的配置文件
    git分支相关的命令
    让双网卡同时工作在内网和外网
    比较ping,tracert和pathping等命令之间的关系
    选择图片,获取图片
    导出功能代码
    什么是以太网??
  • 原文地址:https://www.cnblogs.com/SeaSun/p/2213141.html
Copyright © 2011-2022 走看看