首页 > 其他 > 详细

可控显示用于ajax加载的生成分页导航

时间:2014-02-15 03:05:38      阅读:338      评论:0      收藏:0      [点我收藏+]
bubuko.com,布布扣
(function ($) {

    $.fn.pager = function (recordCount, options) {

        var defaults = {
            //只有一页时是否仍然显示
            alwaysShow: false,//是否一直显示
            isshowfirstend: true,//是否显示首页末页
            isshowprevnext: true,//是否显示上一页下一页
            isshowNumber: false,//是否显示数字
            isshowPgTotal: false,//是否显示数字
            isshowJump: false,//是否显示跳转框
            width: 500,
            currentPageIndex: 1,//当前页面
            pageSize: 10,//每页条数
            onPageIndexChanged: function () { },//翻页方法
            pageid: "",//输出导航的容器id
            prevpgid: "mark=pagerprev",//操纵上一页的id
            nextpgid: "mark=pagernext",//操纵下一页的id
            firstpgid: "mark=pagerfirst",//操纵首页的id
            endpgid: "mark=pagerend",//操纵末页的id
            numpgid: "mark=pagernum",//操纵数字按钮的id
            pginputid: "mark=pginput",//操纵跳转的输入框id
            pgjumpid: "mark=pgjump",//操纵跳转的按钮id
            firstpgtext: "首页",//首页显示的文字
            endpgtext: "末页",//末页显示文字
            prevpgtext: "上一页",//上一页显示的文字
            newxtpgtext: "下一页",//下一页显示的文字
            parentPageClass: "shop_listpage",//分页导航的总样式
            unabledClass: "disabled",//不可用按钮的样式
            jumpInputClass: "shop_int01",//跳转输入框的样式
            jumpButtonClass: "shop_int02",//跳转按钮的样式
            numberSelectClass:"shop_int03",//数字选中样式
        };
        var props = $.extend(defaults, options);
        var pageCount = Math.ceil((recordCount / props.pageSize));

        //当数据不满一页时,是否显示pager
        if (recordCount > props.pageSize || props.alwaysShow) {
            var text = "<div class=\""+props.parentPageClass+"\">";
            if (props.isshowfirstend) {
                text += "<a href=\"javascript:void(0)\" " + props.firstpgid + ">" + props.firstpgtext + "</a>";
            }
            if (props.isshowprevnext)
            {
                if (props.currentPageIndex == 1) {
                    text += "<a href=\"javascript:void(0)\" class=\"" + props.unabledClass + "\"" + props.prevpgid + ">" + 

props.prevpgtext + "</a>";
                }
                else {
                    text += "<a href=\"javascript:void(0)\"" + props.prevpgid + ">"+props.prevpgtext+"</a>";
                }
            }
            if (props.isshowNumber)
            {
                if (props.currentPageIndex < 6) {
                    for (var i = 1; i <=9; i++) {
                        text += "<a href=\"javascript:void(0)\" class=\"" + (i == props.currentPageIndex ? props.numberSelectClass 

: "") + "\" pgdata=\"" + i + "\"" + props.numpgid + ">" + i + "</a>";
                    }
                }
                else if (props.currentPageIndex<pageCount - 4) {
                    text += "<a href=\"javascript:void(0)\" " + props.numpgid + " pgdata=\"" +(props.currentPageIndex - 5) + "\" 

>...</a>";
                    for (var i = props.currentPageIndex - 4; i <= props.currentPageIndex + 4; i++) {
                        text += "<a href=\"javascript:void(0)\" class=\"" + (i == props.currentPageIndex ? props.numberSelectClass 

: "") + "\"" + props.numpgid + " pgdata=\"" + i + "\" >" + i + "</a>";
                    }
                    text += "<a href=\"javascript:void(0)\" " + props.numpgid + " pgdata=\"" + (props.currentPageIndex+5) + "\" 

>...</a>";
                }
                else {
                    text += "<a href=\"javascript:void(0)\" " + props.numpgid + " pgdata=\"" + (pageCount - 9) + "\" >...</a>";
                    for (var i =(pageCount-8); i<=pageCount; i++) {
                        text += "<a href=\"javascript:void(0)\" class=\"" + (i == props.currentPageIndex ? props.numberSelectClass 

: "") + "\"" + props.numpgid + " pgdata=\"" + i + "\" >" + i + "</a>";
                    }
                }
            }
            if (props.isshowprevnext)
            {
                if (props.currentPageIndex < pageCount) {
                    text += "<a href=\"javascript:void(0)\"" + props.nextpgid + ">"+props.newxtpgtext+"</a>";
                }
                else {
                    text += "<a href=\"javascript:void(0)\" class=\""+props.unabledClass+"\"" + props.nextpgid + 

">"+props.newxtpgtext+"</a>";
                }
            }
            if (props.isshowfirstend)
            {
                text += "<a href=\"javascript:void(0)\" " + props.endpgid + ">" + props.endpgtext + "</a>";
            }
            if (props.isshowPgTotal) {
                text += "<span>" + props.currentPageIndex + "/" + (pageCount == 0 ? 1 : pageCount) + "页</span>";
            }
            if (props.isshowJump) {
                text += "<span>跳转到第<input type=\"text\" class=\"" + props.jumpInputClass + "\"" + props.pginputid + " value=

\"" + props.currentPageIndex + "\">页</span><input type=\"submit\" value=\"确定\" class=\"" + props.jumpButtonClass + "\"" + 

props.pgjumpid + "></div>";
            }
            $(props.pageid).html(text);
            $("a["+props.prevpgid+"]").click(function () {
                if (props.currentPageIndex > 1) {
                    raisePageIndexChangedEvent(--props.currentPageIndex);
                }
            });
            $("a[" + props.firstpgid + "]").click(function () {
                    raisePageIndexChangedEvent(1);
            });
            $("a[" + props.endpgid + "]").click(function () {               
                    raisePageIndexChangedEvent(pageCount);
            });
            $("a[" + props.nextpgid + "]").click(function () {
                if (props.currentPageIndex < pageCount) {
                    raisePageIndexChangedEvent(++props.currentPageIndex);
                }
            });
            $("a[" + props.numpgid + "]").click(function () {
                raisePageIndexChangedEvent(Number($.trim($(this).attr("pgdata"))));
            });
            $("input[" + props.pgjumpid + "]").click(function () {
                if (Number($.trim($("input[" + props.pginputid + "]").val())) <= pageCount && Number($.trim($("input[" + 

props.pginputid + "]").val()))>0) {
                    raisePageIndexChangedEvent(Number($.trim($(this).prev("span").find("input[" + props.pginputid + "]").val

())).toFixed(0));
                }
                else if (Number($.trim($("input[" + props.pginputid + "]").val()))>pageCount) {
                    raisePageIndexChangedEvent(pageCount);
                }
                else if (Number($.trim($("input[" + props.pginputid + "]").val()))<=0)
                {
                    raisePageIndexChangedEvent(1);
                }
            });
        }
        function raisePageIndexChangedEvent(pageIndex) {
            props.onPageIndexChanged(pageIndex);
        }
    };

})(jQuery);
bubuko.com,布布扣

可控显示用于ajax加载的生成分页导航

原文:http://www.cnblogs.com/Sunshineqian/p/3549472.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!