前端分页小例子

可爱的橙子大爷

于 2020-09-24 19:01:21 发布

阅读量88

点赞数

分类专栏：小吴的前端分享

本文链接：https://blog.csdn.net/weixin_42337801/article/details/108780896

版权

jquery js

小吴的前端分享专栏收录该内容

64 篇文章 1 订阅

订阅专栏

找了好多好多资料，终于在知乎上发现了，附上大神的地址：https://zhuanlan.zhihu.com/p/34728908?utm_source=wechat_session&utm_medium=social&utm_oi=1033273048593367040
我先写一下，方便以后查阅，也希望可以帮助到你们
需要用到的文件：
page.js
jquery-1.12.4.js

奉上page.js的源码

(function($, window) {
    var Page = function(ele, opt) {
        this.$ele = ele;
        this.defaults = {
            curPage: 1,
            totalPage: 1,
            totalCount: 0,
            morePage: opt.morePage,
            perPageCount: opt.perPageCount
        }
        this.options = $.extend({}, this.defaults, opt);
    }
    Page.prototype = {
        init: function() {
            //数据初始化
            this.dataInit();
            //显示当前页数、总页数
            this.pageInit();
            //分页处理
            this.pageFun();
            //销毁之前事件
            this.offEventFun();
            //事件处理
            this.eventFun();
            return this.$ele;
        },
        pageInit: function() {
            $(this.options.curPageEl).html("当前第" + this.options.curPage + "页");
            $(this.options.totalEl).html("共" + this.options.totalPage + "页");
        },
        pageFun: function() {
            var $list = this.$ele.children();
            $list.hide();
            var start = (this.options.curPage - 1) * this.options.perPageCount;
            if (this.options.curPage == this.options.totalPage) {
                var end = $list.length;
                for (var i = start; i < end; i++) {
                    $($list[i]).show();
                }
            } else {
                for (var i = start; i < start + this.options.perPageCount; i++) {
                    $($list[i]).show();
                }
            }
            this.pageInit();
        },
        dataInit: function() {
            var $list = this.$ele.children();
            this.options.curPage = 1;
            this.options.totalCount = $list.length;
            this.options.totalPage = Math.ceil($list.length / this.options.perPageCount);
        },
        eventFun: function() {
            //下一页
            var self = this;
            $(this.options.next).on("click", function() {
                if (self.options.curPage + 1 > self.options.totalPage) {
                    alert("已经是最后一页");
                    return;
                }
                self.options.curPage++;
                self.pageFun();
            });
            //上一页
            $(this.options.prev).on("click", function() {
                if (self.options.curPage - 1 < 1) {
                    alert("已经是第一页");
                    return;
                }
                self.options.curPage--;
                self.pageFun();
            });
            //下n页
            $(this.options.nextMore).on("click", function() {
                if (self.options.curPage + self.options.morePage > self.options.totalPage) {
                    self.options.curPage = self.options.totalPage;
                    alert("已经是最后一页")
                } else {
                    self.options.curPage += self.options.morePage;
                }
                self.pageFun();
            });
            //上n页
            $(this.options.prevMore).on("click", function() {
                if (self.options.curPage - self.options.morePage < 1) {
                    self.options.curPage = 1;
                    alert("已经是第一页")
                } else {
                    self.options.curPage -= self.options.morePage;
                }
                self.pageFun();
            });
        },
        offEventFun: function() {
            $(this.options.next).off("click");
            $(this.options.prev).off("click");
            $(this.options.nextMore).off("click");
            $(this.options.prevMore).off("click");
        }
    }
    $.fn.page = function(options) {
        var page = new Page(this, options);
        return page.init();
    }
})(jQuery, window)

前台使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-1.12.4.js"></script>
    <script src="page.js"></script>
    <style>
        #demo>div {
            display: none;
        }
    </style>
</head>

<body>
    <div id="demo">
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
        <div>123456</div>
    </div>
    <span class="next">下一页</span>
    <span class="prev">上一页</span>
    <span class="nextMore">下5页</span>
    <span class="prevMore">上5页</span>
    <span class="total"></span>
    <span class="cur_page"></span>
</body>
<script>
    var pageParam = {
            next: '.next', //下一页按钮jq选择器
            prev: '.prev', //上一页按钮jq选择器
            nextMore: '.nextMore', //下n页按钮jq选择器
            prevMore: '.prevMore', //上n页按钮jq选择器
            totalEl: '.total', //总页数jq元素  元素内包含 eq:“共n页”
            curPageEl: '.cur_page', //当前页数jq元素  元素内包含 eq:“当前第n页”
            perPageCount: 4, //每页显示数量
            morePage: 5 //上、下n页跳转数
        }
        //demo为包裹列表的容器
    $("#demo").page(pageParam)
</script>

</html>

可爱的橙子大爷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端分页小例子

找了好多好多资料，终于在知乎上发现了，附上大神的地址：https://zhuanlan.zhihu.com/p/34728908?utm_source=wechat_session&utm_medium=social&utm_oi=1033273048593367040我先写一下，方便以后查阅，也希望可以帮助到你们需要用到的文件：page.jsjquery-1.12.4.js奉上page.js的源码(function($, window) { var Page = fun
复制链接

扫一扫