jquery分页功能

最新推荐文章于 2023-04-21 14:44:45 发布
最新推荐文章于 2023-04-21 14:44:45 发布
阅读量3.9k 收藏
点赞数
分类专栏： ASP.NET编程 文章标签： 分页 jquery分页 异步分页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lb809663396/article/details/9273871
版权

HTML页面代码


<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="/js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <link href="/js/jsPage/JqueryPages.css" rel="stylesheet" type="text/css" />
    <script src="/js/jsPage/JqueryPages.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //首先获取数据总数
            $.post("PBFans.ashx", { "action": "getMsgNum" }, function (data, status) {
                if (status == "success") {
                    //判断是否有数据，data > 0显示分页，data = 0没有分页
                    if (data > 0) {
                        //调用编写好的分页插件                    
                        $("#holder").JqueryPages({
                            previous: "上一页",
                            next: "下一页",
                            perPage: 2,
                            startPage: 1,
                            startRange: 2,
                            midRange: 3,
                            endRange: 1,
                            skip: "跳转",
                            msgnum: data,
                            callback: function (page) {
                                //隐藏不是该页的其他数据
                                $("#itemContainer").find("li:not([data-page=" + page.current + "])").hide();
                                //获取该页数据对象，data-page自定义属性表示数据归属
                                var nowlist = $("#itemContainer").find("li[data-page=" + page.current + "]");
                                //判断是否已经加载过数据
                                if (nowlist.length > 0) {
                                    nowlist.show();
                                }
                                else {
                                    //否则异步取出数据
                                    $.post("PBFans.ashx", { "action": "getMsg", "pageNum": page.current, "count": 2, "sort": 1 }, function (data, status) {
                                        if (status == "success") {
                                            var msg = $.parseJSON(data);
                                            var insertHtml = "";
                                            $.each(msg, function () {
                                                insertHtml += "<li data-page='" + page.current + "'>" + this.USERNAME + "</li>";
                                            });
                                            $("#itemContainer").append(insertHtml);
                                        }
                                    });
                                }
                            }
                        });
                    }
                }
            });

        });
    </script>
</head>
<body>
    <ul id="itemContainer">
        <!--<li data-page="1" style="display: none;">1</li>
        <li data-page="1" style="display: none;">1</li>
        <li data-page="2" style="display: none;">2</li>
        <li data-page="2" style="display: none;">2</li>-->
    </ul>
    <div id="holder">
    </div>
</body>
</html>

jqueryPage.js代码


(function ($, window, document, undefined) {
    var name = "JqueryPages",
        instance = null,
        defaults = { //默认值
            first: false,
            previous: "上一页",
            next: "下一页",
            last: false,
            links: "numeric",
            startPage: 1,
            perPage: 10,  //每页显示数量
            midRange: 5,
            startRange: 1,
            endRange: 1,
            pause: 0,
            clickStop: false,
            delay: 50,
            fallback: 400,
            minHeight: true,
            callback: undefined,
            skip: "跳转",
            msgnum: 0
        };
    //自定义JQUERY
    $.fn[name] = function (arg) {
        var type = $.type(arg);
        if (type === "object") {
            if (this.length && !$.data(this, name)) {
                instance = new Plugin(this, arg);
                this.each(function () {
                    $.data(this, name, instance);
                });
            }
            return this;
        }

        if (type === 'number' && arg % 1 === 0) {
            if (instance.validNewPage(arg)) {
                instance.paginate(arg);
            }
            return this;
        }

        return this;
    };

    function Plugin(element, options) {
        this.options = $.extend({}, defaults, options); //合并默认值
        this._holder = $(element);
        this._nav = {};
        this._first = $(this.options.first);  //首页对象
        this._previous = $(this.options.previous); //上一页对象
        this._next = $(this.options.next); //下一页对象
        this._last = $(this.options.last); //尾页对象
        this._numPages = Math.ceil(this.options.msgnum / this.options.perPage);
        this._currentPageNum = this.options.startPage;
        this._clicked = false;
        this.init();
    }


    Plugin.prototype.init = function () {
        this.setStyles();
        this.setNav();
        this.paginate(this._currentPageNum);
        this.setMinHeight();
    };

    Plugin.prototype.setStyles = function () {
        var requiredStyles = "<style>" +
        ".jp-invisible { visibility: hidden !important; } " +
        ".jp-hidden { display: none !important; }" +
        "</style>";

        $(requiredStyles).appendTo("head");
    };

    Plugin.prototype.setNav = function () {
        var navhtml = this.writeNav();

        this._holder.each(this.bind(function (index, element) {
            var holder = $(element);
            holder.html(navhtml);
            this.cacheNavElements(holder, index);
            this.bindNavHandlers(index);
            this.disableNavSelection(element);
        }, this));
    };
    //拼出分页HTML代码
    Plugin.prototype.writeNav = function () {
        var i = 1, navhtml;
        navhtml = this.writeBtn("first") + this.writeBtn("previous");
        for (; i <= this._numPages; i++) {
            if (i === 1 && this.options.startRange === 0) {
                navhtml += "<span>...</span>";
            }
            if (i > this.options.startRange && i <= this._numPages - this.options.endRange) {
                navhtml += "<a class='jp-hidden'>";
            } else {
                navhtml += "<a>";
            }
            switch (this.options.links) {
                case "numeric":
                    navhtml += i;
                    break;
                case "blank":
                    break;
            }
            navhtml += "</a>";
            if (i === this.options.startRange || i === this._numPages - this.options.endRange) {
                navhtml += "<span>...</span>";
            }
        }

        navhtml += this.writeBtn("next") + this.writeBtn("last");
        navhtml += this.options.skip + "<input type='text' style='width:30px;'/><input type='button' value='GO'/>";
        return navhtml;
    };

    Plugin.prototype.writeBtn = function (which) {
        return this.options[which] !== false && !$(this["_" + which]).length ?
            "<a class='jp-" + which + "'>" + this.options[which] + "</a>" : "";
    };

    //获取对象里所有元素
    Plugin.prototype.cacheNavElements = function (holder, index) {
        this._nav[index] = {};

        this._nav[index].holder = holder;

        this._nav[index].first = this._first.length ? this._first : this._nav[index].holder.find("a.jp-first");
        this._nav[index].previous = this._previous.length ? this._previous : this._nav[index].holder.find("a.jp-previous");
        this._nav[index].next = this._next.length ? this._next : this._nav[index].holder.find("a.jp-next");
        this._nav[index].last = this._last.length ? this._last : this._nav[index].holder.find("a.jp-last");

        this._nav[index].skipPg = this._nav[index].holder.find("input[type=text]"); //获取跳转文本框页数对象(修改)
        this._nav[index].skipBtn = this._nav[index].holder.find("input[type=button]"); //获取跳转按钮对象(修改)

        this._nav[index].fstBreak = this._nav[index].holder.find("span:first");
        this._nav[index].lstBreak = this._nav[index].holder.find("span:last");

        this._nav[index].pages = this._nav[index].holder.find("a").not(".jp-first, .jp-previous, .jp-next, .jp-last");
        this._nav[index].permPages = this._nav[index].pages.slice(0, this.options.startRange)
            .add(this._nav[index].pages.slice(this._numPages - this.options.endRange, this._numPages));
        this._nav[index].pagesShowing = $([]);
        this._nav[index].currentPage = $([]);
    };

    Plugin.prototype.bindNavHandlers = function (index) {
        var nav = this._nav[index];

        nav.holder.bind("click.jPages", this.bind(function (evt) {
            var newPage = this.getNewPage(nav, $(evt.target));
            if (this.validNewPage(newPage)) {
                this._clicked = true;
                this.paginate(newPage);
            }
            evt.preventDefault();
        }, this));

        // 跳转按钮出发方法(修改)
        nav.skipBtn.bind("click.jPages", this.bind(function () {
            var newPage = nav.skipPg.val();
            if (this.validNewPage(newPage)) {
                this.paginate(newPage);
            }
        }, this));

        //首页单击触发
        if (this._first.length) {
            this._first.bind("click.jPages", this.bind(function () {
                if (this.validNewPage(1)) {
                    this._clicked = true;
                    this.paginate(1);
                }
            }, this));
        }

        //上一页单机触发
        if (this._previous.length) {
            this._previous.bind("click.jPages", this.bind(function () {
                var newPage = this._currentPageNum - 1;
                if (this.validNewPage(newPage)) {
                    this._clicked = true;
                    this.paginate(newPage);
                }
            }, this));
        }

        // 下一页单机触发
        if (this._next.length) {
            this._next.bind("click.jPages", this.bind(function () {
                var newPage = this._currentPageNum + 1;
                if (this.validNewPage(newPage)) {
                    this._clicked = true;
                    this.paginate(newPage);
                }
            }, this));
        }

        //尾页单机触发
        if (this._last.length) {
            this._last.bind("click.jPages", this.bind(function () {
                if (this.validNewPage(this._numPages)) {
                    this._clicked = true;
                    this.paginate(this._numPages);
                }
            }, this));
        }

    };

    Plugin.prototype.disableNavSelection = function (element) {
        if (typeof element.onselectstart != "undefined") {
            element.onselectstart = function () {
                return false;
            };
        } else if (typeof element.style.MozUserSelect != "undefined") {
            element.style.MozUserSelect = "none";
        } else {
            element.onmousedown = function () {
                return false;
            };
        }
    };


    Plugin.prototype.getNewPage = function (nav, target) {
        if (target.is(nav.currentPage)) return this._currentPageNum;
        if (target.is(nav.pages)) return nav.pages.index(target) + 1;
        if (target.is(nav.first)) return 1;
        if (target.is(nav.last)) return this._numPages;
        if (target.is(nav.previous)) return nav.pages.index(nav.currentPage);
        if (target.is(nav.next)) return nav.pages.index(nav.currentPage) + 2;
    };

    Plugin.prototype.validNewPage = function (newPage) {
        return newPage !== this._currentPageNum && newPage > 0 && newPage <= this._numPages ?
            true : false;
    };

    Plugin.prototype.paginate = function (page) {
        var pageInterval;
        pageInterval = this.updatePages(page);
        this._currentPageNum = page;
        if ($.isFunction(this.options.callback)) {
            this.callback(page, pageInterval);
        }
        this.updatePause();
    };


    Plugin.prototype.updatePages = function (page) {
        var interval, index, nav;

        interval = this.getInterval(page);

        for (index in this._nav) {
            if (this._nav.hasOwnProperty(index)) {
                nav = this._nav[index];
                this.updateBtns(nav, page);
                this.updateCurrentPage(nav, page);
                this.updatePagesShowing(nav, interval);
                this.updateBreaks(nav, interval);
            }
        }

        return interval;
    };

    Plugin.prototype.getInterval = function (page) {
        var neHalf, upperLimit, start, end;

        neHalf = Math.ceil(this.options.midRange / 2);
        upperLimit = this._numPages - this.options.midRange;
        start = page > neHalf ? Math.max(Math.min(page - neHalf, upperLimit), 0) : 0;
        end = page > neHalf ? Math.min(page + neHalf - (this.options.midRange % 2 > 0 ? 1 : 0), this._numPages) : Math.min(this.options.midRange, this._numPages);

        return { start: start, end: end };
    };

    Plugin.prototype.updateBtns = function (nav, page) {

        if (page === 1) {
            nav.first.addClass("jp-disabled");
            nav.previous.addClass("jp-disabled");
        }

        if (page === this._numPages) {
            nav.next.addClass("jp-disabled");
            nav.last.addClass("jp-disabled");
        }

        if (this._currentPageNum === 1 && page > 1) {
            nav.first.removeClass("jp-disabled");
            nav.previous.removeClass("jp-disabled");
        }

        if (this._currentPageNum === this._numPages && page < this._numPages) {
            nav.next.removeClass("jp-disabled");
            nav.last.removeClass("jp-disabled");
        }

    };

    Plugin.prototype.updateCurrentPage = function (nav, page) {

        nav.currentPage.removeClass("jp-current");
        nav.currentPage = nav.pages.eq(page - 1).addClass("jp-current");

    };

    Plugin.prototype.updatePagesShowing = function (nav, interval) {
        var newRange = nav.pages.slice(interval.start, interval.end).not(nav.permPages);

        nav.pagesShowing.not(newRange).addClass("jp-hidden");
        newRange.not(nav.pagesShowing).removeClass("jp-hidden");

        nav.pagesShowing = newRange;

    };

    Plugin.prototype.updateBreaks = function (nav, interval) {

        if (interval.start > this.options.startRange || (this.options.startRange === 0 && interval.start > 0)) {
            nav.fstBreak.removeClass("jp-hidden");
        } else {
            nav.fstBreak.addClass("jp-hidden");
        }

        if (interval.end < this._numPages - this.options.endRange) {
            nav.lstBreak.removeClass("jp-hidden");
        } else {
            nav.lstBreak.addClass("jp-hidden");
        }

    };

    Plugin.prototype.callback = function (page, pageInterval) {
        var pages = {
            current: page, //当前是第几页
            interval: pageInterval,
            count: this._numPages, //总页数
            everyNum: this.options.perPage //每页数据量
        };

        pages.interval.start = pages.interval.start + 1;

        this.options.callback(pages);
    };

    Plugin.prototype.updatePause = function () {
        if (this.options.pause && this._numPages > 1) {
            clearTimeout(this._pause);
            if (this.options.clickStop && this._clicked) {
                return;
            } else {
                this._pause = setTimeout(this.bind(function () {
                    this.paginate(this._currentPageNum !== this._numPages ? this._currentPageNum + 1 : 1);
                }, this), this.options.pause);
            }
        }
    };

    Plugin.prototype.setMinHeight = function () {
        if (this.options.minHeight && !this._container.is("table, tbody")) {
            setTimeout(this.bind(function () {
                this._container.css({
                    "min-height": this._container.css("height")
                });
            }, this), 1000);
        }
    };

    Plugin.prototype.bind = function (fn, me) {
        return function () {
            return fn.apply(me, arguments);
        };
    };




})(jQuery, window, document);


css代码


#holder {
	margin: 15px 0;
}

#holder a {
	font-size: 12px;
	cursor: pointer;
	margin: 0 5px;
	color: #333;
}

#holder a:hover {
	background-color: #222;
	color: #fff;
}

#holder a.jp-previous { margin-right: 15px; }
#holder a.jp-next { margin-left: 15px; }

#holder a.jp-current, a.jp-current:hover { 
	color: #FF4242;
	font-weight: bold;
}

#holder a.jp-disabled, a.jp-disabled:hover {
	color: #bbb;
}

#holder a.jp-current, a.jp-current:hover,
#holder a.jp-disabled, a.jp-disabled:hover {
	cursor: default; 
	background: none;
}

#holder span { margin: 0 5px; }


源码下载地址


wang的CSND
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于jquery的web分页实现
2401_84093019的博客
04-22 289
资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
jquery实现分页
web前端开发
03-28 588
分页     *{         margin:0;         padding:0;         list-style: none;     }     #pageIt{         width:1300px;         height:50px;         border:1px solid red;         m
jQuery实现简单分页
cqn2bd2b的博客
11-10 2691
要是你们需要，直接复制过去就可以，我故意把css，js，放在一起就是为了方便copy。//移除之前的active。//移除之前的active。//移除之前的active。//为当前页增加样式。
jQuery实现简单分页(jqPaginator插件)
fish的博客
07-27 3965
jQuery实现简单分页(jqPaginator插件)，前后端交互
jQuery pagination分页插件
qq_22325259的博客
05-08 4001
插件介绍 此jQuery插件为Ajax分页插件，一次性加载，故分页切换时无刷新与延迟，如果数据量较大不建议用此方法，因为加载会比较慢。 因为用到了ajax请求，想要看到效果，必须放到iis站点中运行，及把相关文件放到vs新建项目中预览 实现效果 配置信息 pageCount：总页数（默认值：9） totalData：数据总条数（默认值：0） showData：每页展示条数（默认值：0） current：当前第几页（默认值：1） prevCls：上一页class样式（默认值：'p.
jq分页功能
weixin_41706307的博客
04-21 189
<html> <head> <meta charset='utf-8'> <style type="text/css"> a { text-decoration: none; } .table2 { border: #C8C8C8 solid; border-width: 1px 0px 0px 1px; background: #F3F0F0; mar
jquery分页
qq_44091061的博客
04-25 3813
jquery分页
jquery实现分页页码
☆╮123☆
07-01 2362
实例源码：                 a{ color: red; padding-bottom: 10px} .pagelist a{ padding-left: 10px; color: green;} 首页 尾页         var total=10;//总页数         var num=5;//
Jquery简单分页实现方法
10-23
总的来说，这个jQuery分页实现方法通过简单的DOM操作和事件监听，实现了基本的分页功能。尽管它可能不包含高级特性，如动态加载、缓存或无限滚动等，但对于小型项目或学习实践，这是一个简洁且实用的解决方案。在...
基于jquery的分页功能
03-16
下面是一个简单的jQuery分页实现示例： ```javascript $(document).ready(function() { var currentPage = 1; var itemsPerPage = 10; function loadPage(page) { $.ajax({ url: 'api/data?page=' + page, ...
Jquery分页控件
12-20
**jQuery分页控件**是前端开发中常用的一种组件，它能够帮助用户高效地浏览大量数据，提升用户体验。在网页应用中，如果一次性加载所有数据可能会导致页面响应速度变慢，甚至消耗过多的网络资源。因此，使用分页控件...
jquery分页插件
01-17
总的来说，jQuery分页插件是提升Web应用用户体验的重要工具，它通过简单的API和高度的可定制性，使得开发者能够轻松地集成和控制页面分页功能。在实际开发中，选择一个适合自己项目需求的分页插件，结合良好的前端...
jQuery分页插件设置分页内容显示数量的分页代码
11-08
通过这种方式，我们可以轻松地实现jQuery分页插件的分页功能，并灵活控制每页显示的内容数量。值得注意的是，这只是一个基础的示例，实际应用中可能还需要考虑其他因素，如数据的异步加载、动态计算总页数、自定义...
jQuery实现的分页功能示例
12-29
本文实例讲述了jQuery实现的分页功能。分享给大家供大家参考，具体如下： 1、分页栏HTML码 2、CSS样式文件 .g-cf:after {clear: both;content: ;display: table;} .g-cf {zoom:1;} /*分页*/ .g-pager{ text...
JQuery实现分页功能
热门推荐
pan_junbiao的博客
02-15 2万+
使用JQuery实现分页功能。 1、分页栏HTML码 2、 CSS样式文件 .g-cf:after {clear: both;content: "";display: table;} .g-cf {zoom:1;} /*分页*/ .g-pager{ text-align:center; color: #111111; font: 12px/1.5em Ari
分页功能的简单实现。使用模板引擎
weixin_30724853的博客
12-25 389
思路：页面上动态生成上一页（i-1）， i - 2，i - 1 ，i， i + 1,， i +2 ，下一页（i+1） 。7个按钮。其中 i是当前页码。 　　　在模板中判断 i - 1 ,i - 2是否小于0 ，是则不生成按钮。同理判断i + 1 ，i + 2是否大于最大页码。 　　 在按钮中自定义属性date -page存储页码。根据页码发送ajax请求获取数据。 代码...
jQuery分页
qq_46177396的博客
04-06 549
【代码】jQuery分页。
jquery实现分页功能
最新发布
05-18
要使用jQuery实现分页功能，需要先获取到要分页的数据，然后根据每页显示的数量和总数据量计算出需要分成多少页。然后在页面上生成相应的分页导航，当用户点击不同的分页按钮时，再用jQuery动态地显示相应的数据。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值