js分页页码

最新推荐文章于 2024-05-18 10:03:59 发布
qq_36602213
最新推荐文章于 2024-05-18 10:03:59 发布
阅读量506
点赞数
本文链接：https://blog.csdn.net/qq_36602213/article/details/70157367
版权
<!DOCTYPE html>
<html>
<head>
    <title>Paginationjs example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <style type="text/css">
        .pager-list {
            float: right;
            position: relative;
            font-size: 10pt;
        }

        .pager-list > .pager {
            display: block;
            position: relative;
        }

        .pager-list ul li {
            list-style: none;
            float: left;
            margin: 0 3px;
            min-width: 37px;
        }

        .pager-list ul li.next,
        .pager-list ul li.prev {
            width: auto;
        }

        .pager-list ul li.disable a {
            color: #848c94;
        }

        .pager-list ul li.text {
            display: block;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 0px;
            color: black;
            border-radius: 2px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
        }

        .pager-list ul li.text input.go {
            width: 25px;
        }
        .pager-list ul li.text select.go {
            padding:2px 2px;
        }
        .pager-list ul li.text span.go {
            color: #848c94;
            margin-left: 2px;
            cursor: pointer;
            background-color: silver;
            padding: 4px;
            border-radius: 2px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
        }

        .pager-list ul li a {
            display: block;
            /*width: 24px;*/
            padding: 0 7px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            border: 1px solid #848c94;
            color: black;
            border-radius: 2px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
        }

        .pager-list ul li a:hover,
        .pager-list ul li.active a {
            background-color: #b2d1d8;
        }
    </style>
</head>
<body>

<div class="pager-list"></div><div style="clear: both;"></div>
<div class="pager-list"></div><div style="clear: both;"></div>
<div class="pager-list"></div><div style="clear: both;"></div>
<div class="pager-list"></div><div style="clear: both;"></div>
<div class="pager-list"></div><div style="clear: both;"></div>
<div class="pager-list"></div><div style="clear: both;"></div>
<input type="button" id="btn_Refresh" value="Refresh" />

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
  

    page();
    function page(){
        
        $().ready(function () {
            $('div.pager-list').pageList({
                prevText: '前一页',
                nextText: '下一页',
                recordText: '共{0}页，{1}条记录',
                totalCount: 400,//设置总条数 可以从ajax里动态获取
                goInputType: 'text',
                //showGoLink: true,  
                showPageRange: 5,
                renderPerCall: true,
                clickCallback: function (currentPage) {

                   	//在这执行ajax方法 currentPage是页码 可在ajax方法data里的设置请求的哪一页

                    console.info("currentPage:" + currentPage);
                }
            });
            $('#btn_Refresh').click(function () {
                $('div.pager-list').pageList(null, "refresh");
            });
        });
    }

    $.fn.pageList = function (arg, methodName) {
        if (typeof methodName === "string" && $.trim(methodName) != "") {
            switch (methodName) {
                case 'refresh'://刷新当前页,一般用于删除或者更新后  
                    $(this).each(function () {
                        var arg = $(this).data('pageListArg');
                        if (arg != null && typeof arg.clickCallback === "function") {
                            arg.clickCallback(arg.currentPage);
                        }
                    });
                    break;
            }
        }
        else {
            var defaultSettings = {
                prevText: 'Prev',//显示的前一页文本  
                nextText: 'Next',//显示的下一页文本  
                showGoLink: 'auto',//是否显示快速跳转，可能的值为auto 自动判断；true 永远显示；false 永不显示  
                goInputType: 'select',//如何显示快速跳转输入，可能的值为select 下拉列表；text 输入框，默认值为select  
                goText: '跳转',//显示的快速跳转文本  
                recordText: '',//显示记录数，为空时不显示，否则按照占位符显示文本，{0}表示总页数，{1}表示总记录数  
                clickCallback: function (currentPage) { },//链接被点击时触发的事件，currentPage表示当前点击的是第几页，索引从1开始  
                renderPerCall: true,//是否每次点击都重新绘制，如果每次clickCallback事件中都会重新绘制pageList，此处请设置为false减少绘制消耗  
                pageSize: 10,//每页显示的数据条数  
                currentPage: 1,//当前第几页，索引从1开始  
                totalCount: 0,//总记录数  
                currentPageCenter: true,//当前页是否居中，true表示居中,false表示按showPageRange倍率范围显示,注意此值会导致完全不同的显示方式  
                showPageRange: 5//允许最小值3，当currentPageCenter设置为true时，表示去除第一页，最后一页后，还需显示的页面数量；为false时,表示在倍率范围内应当显示的页面链接数量,  
            };
            arg = $.extend({}, defaultSettings, arg);
            var totalPages = ~~(arg.totalCount / arg.pageSize) + (~~(arg.totalCount % arg.pageSize) == 0 ? 0 : 1);//获取总页数  
            if (arg.currentPage < 1) {//修正当前页页码为第一页  
                arg.currentPage = 1;
            }
            if (arg.currentPage > totalPages) {//修正当前页页码为最后一页  
                arg.currentPage = totalPages;
            }
            if (!(arg.showPageRange > 2)) {
                arg.showPageRange = 3;
            }
            $(this).data('pageListArg', arg);
            $(this).each(function () {
                $(this).empty();//无数据  
                if (totalPages > 0) {
                    var ul = $('<ul class="pager"></ul>');
                    var startPage = 2, endPage = totalPages - 1;//排除首页最后一页后显示的第一个超链接，最后一个超链接  
                    var prevS = false, nextS = false;//是否需要显示…对应的超链接  
                    if (arg.showPageRange + 4 < totalPages) {//因为页面链接最多包含arg.showPageRange + 4个，所以如果总页数大于时，才显示对应的…  
                        if (!arg.currentPageCenter) {
                            var rangeIdx = ~~(arg.currentPage / arg.showPageRange) + (~~(arg.currentPage % arg.showPageRange) == 0 ? 0 : 1);
                            startPage = (rangeIdx - 1) * arg.showPageRange + 1;
                            endPage = rangeIdx * arg.showPageRange;
                            if (startPage < 2) { startPage = 2; }//修正  
                            if (endPage >= totalPages) { endPage = totalPages - 1; }//修正  
                            if (startPage >= endPage) { startPage = startPage - arg.showPageRange; }//修正  
                            if (endPage == totalPages - 2) { endPage++; }//修正  
                            prevS = startPage >= arg.showPageRange;
                            nextS = endPage < totalPages - 1;
                        }
                        else {
                            var prevReduce = ~~(arg.showPageRange / 2);
                            var nextAdd = prevReduce;
                            if (~~(arg.showPageRange % 2) == 0) {
                                prevReduce--;//showPageRange为偶数时，currentPage前面显示的页码链接数比后面显示的链接数少一个  
                            }
                            if (prevReduce < 0) {//修正当showPageRange被设置为1导致的负数  
                                prevReduce = 0;
                            }
                            startPage = arg.currentPage - prevReduce;
                            if (startPage < 2) { startPage = 2; }//修正startPage  
                            endPage = arg.currentPage + nextAdd;
                            if (endPage - startPage < arg.showPageRange) { endPage = startPage + arg.showPageRange - 1; }//根据startPage修正endPage  
                            if (endPage > totalPages - 1) { endPage = totalPages - 1; startPage = endPage - arg.showPageRange + 1; }//修正endPage,并同步修正startPage  
                            if (startPage <= 3) {//再次修正startPage  
                                startPage = 2;
                            }
                            if (endPage > totalPages - 3) {//再次修正endPage  
                                endPage = totalPages - 1;
                            }
                            prevS = startPage - 1 > 1;
                            nextS = endPage + 1 < totalPages;
                        }
                    }
                    var li = renderDoms(arg.prevText, arg.currentPage == 1, false, arg.currentPage - 1, arg);//前一页  
                    li.addClass("prev");
                    ul.append(li);
                    ul.append(renderDoms("1", arg.currentPage == 1, arg.currentPage == 1, 1, arg));//第一页  
                    if (prevS) {
                        ul.append(renderDoms('…', false, false, startPage - 1, arg));//…页  
                    }
                    for (var i = startPage; i <= endPage; i++) {
                        ul.append(renderDoms(i, arg.currentPage == i, arg.currentPage == i, i, arg));//第i页  
                    }
                    if (nextS) {
                        ul.append(renderDoms('…', false, false, endPage + 1, arg));//…页  
                    }
                    if (totalPages > 1) {
                        ul.append(renderDoms(totalPages, arg.currentPage == totalPages, arg.currentPage == totalPages, totalPages, arg));//最后一页  
                    }
                    li = renderDoms(arg.nextText, arg.currentPage == totalPages, false, arg.currentPage + 1, arg);//下一页  
                    li.addClass("next");
                    ul.append(li);
                    var showGo;
                    switch ((arg.showGoLink + '').toLowerCase()) {
                        case "true":
                            showGo = true; break;
                        case "false":
                            showGo = false; break;
                        default:
                            showGo = arg.showPageRange + 4 < totalPages; break;
                    }
                    if (showGo) {
                        li = $('<li class="text"><span class="go">' + arg.goText + '</span></li>');
                        var sel;
                        if (arg.goInputType.toLowerCase() != 'text') {
                            sel = $('<select class="go"></select>');//<input tyle="text" class="go" />  
                            for (var i = 1; i <= totalPages; i++) {
                                sel.append('<option value="' + i + '">' + i + '</option>');
                            }
                            sel.val(arg.currentPage);
                        }
                        else {
                            sel = $('<input tyle="text" class="go" />');
                            sel.focus(function () {
                                $(this).val('');
                            }).change(function () {
                                var num = parseInt($(this).val());
                                if (num && num > 0) {
                                    if (num > totalPages) {
                                        num = totalPages;
                                    }
                                    $(this).val(num);
                                }
                                else {
                                    $(this).val('');
                                }
                            }).keyup(function () { $(this).change(); });
                        }
                        var sp = li.find('span');
                        sel.insertBefore(sp);
                        sp.click(function () {
                            var pageNumber = ~~$(this).parent().find('.go:eq(0)').val();
                            if (pageNumber > 0) {
                                clickEvent($(this).parent(), arg, pageNumber);
                            }
                        });
                        ul.append(li);
                    }
                    if (typeof arg.recordText === "string" && $.trim(arg.recordText) != "") {
                        ul.append('<li class="text">' + arg.recordText.replace(/\{0\}/g, totalPages).replace(/\{1\}/g, arg.totalCount) + '</li>');
                    }
                    $(this).append(ul);
                }
            });
        }
        function renderDoms(text, disable, active, pageNumber, arg) {
            var li = $('<li><a style="cursor:' + (disable ? "" : "pointer") + ';">' + text + '</a></li>');
            if (active) {
                li.addClass("active");
            }
            if (disable) {
                li.addClass("disable");
            }
            else {
                li.click(function () {
                    clickEvent(this, arg, pageNumber);
                });
            }
            return li;
        }
        function clickEvent(dom, arg, pageNumber) {
            if (typeof arg.clickCallback === "function") {
                arg.clickCallback(pageNumber);
            }
            if (arg.renderPerCall) {
                arg.currentPage = pageNumber;
                $(dom).parent().parent().pageList(arg);
            }
        }
    };
</script>
</body>
</html>
qq_36602213
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js分页页码

html> Paginationjs example http-equiv="Content-Type" content="text/html; charset=UTF-8"> type="text/css"> .pager-list { float: right; position: relative;
复制链接

扫一扫