• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

js实现简单的前端分页效果

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

有些项目业务比较简单,但用到前端分页的地方又比较多,插件的体积比较难控制用起来也麻烦,所以自己写一个简易的。

实现思路

通过 jQuery.slice() 选择子集的区间元素, 然后控制显示隐藏来实现;
假设每页显示数量为x,当前页码为y,元素索引从0开始,那么显示的区间即为 x(y-1) 到 xy。

效果演示

demo代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端分页实现demo</title>
</head>

<body>
    <div class="parent">
        <ul class="box" style="min-height: 147px;">

        </ul>
        <div class="page-box">
            <button class="page-btn prev">上一页</button>
            <span class="page-num">1/1</span>
            <button class="page-btn next">下一页</button>
        </div>
    </div>

    <div class="parent">
        <ul class="box2" style="min-height: 63px;">

        </ul>
        <div class="page-box">
            <button class="page-btn prev">上一页</button>
            <span class="page-num">1/1</span>
            <button class="page-btn next">下一页</button>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        /**
         * 分页初始化
         * @param {*} eleBox 需要被分页的容器
         * @param {*} size  每页的条数
         */
        function InitPagination(eleBox, size) {
            var box = $(eleBox),
                children = box.children(),
                total = children.length,
                pageBox = box.next(),
                pageNum = pageBox.find('.page-num'),
                maxNum = !Math.ceil(total / size) ? 1 : Math.ceil(total / size);

            pageNum.text('1/' + maxNum);
            children.hide();
            children.slice(0, size).show();

            pageBox.off().on('click', '.prev, .next', function (e) {
                var nowNum = parseInt(pageNum.text().split('/')[0]);

                if ($(this).hasClass('prev')) {
                    nowNum--;
                    if (nowNum < 1) {
                        nowNum = 1
                        return;
                    }
                } else {
                    nowNum++;
                    if (nowNum > maxNum) {
                        nowNum = maxNum
                        return;
                    }
                }

                children.hide();
                children.slice(size * (nowNum - 1), nowNum * size).show();
                pageNum.text(nowNum + '/' + maxNum);
            })
        }
        // 模拟数据写入
        var box = $('.box'), box2 = $('.box2'), li = '';
        for (let i = 0; i < 16; i++) {
            li += '<li>' + i + '</li>'
        }
        box.html(li);
            box2.html(li);

        // 实例化分页器
        new InitPagination(box, 7)
        new InitPagination(box2, 3)
    </script>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Vue+SpringBoot前后端分离中的跨域问题发布时间:2022-02-05
下一篇:
JavaScript之clipboard用法详解发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap