前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript实现带省略号的分页

JavaScript实现带省略号的分页

作者头像
likepoems
发布2023-03-04 17:15:49
1.1K0
发布2023-03-04 17:15:49
举报
文章被收录于专栏:学习笔记分享

本文最后更新于 57 天前,其中的信息可能已经有所发展或是发生改变。

1、实现功能

  • 可以跳转上一页、下一页、数据过多省略号显示,点击省略号可以实现快速跳转。
  • 纯js+html+css实现,引入js文件后再使用方法即可快速生成。

2、实现过程

2.1 html页面(index.html)

代码语言:javascript
复制
<!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>javascript分页</title>
</head>

<body>
    <div>
        <ul id="pagination"></ul>
    </div>
    <script src="./index.js"></script>
    <script>
        generatePagination(1000, 10, 1);
    </script>
</body>

</html>

2.2 js逻辑(index.js)

代码语言:javascript
复制
function generatePagination(total, pageSize, pageIndex) {

    /* 创建style标签并设置style样式 */
    let style = document.createElement('style');
    style.innerHTML = "#pagination{width:100%;margin-top:30px;position:fixed;left:0;display:flex;padding-left:0;}#pageTips{position:fixed;right:10px;font-size:15px;}ul li{list-style:none;display:inline-block;user-select:none;}.list-items{width:36px;height:36px;line-height:36px;text-align:center;background-color:#fff;color:#000;cursor:pointer;transition:all .3s;border:1px solid #dedede;border-radius:5px;}.list-items:hover{background-color:#e9ecef;border-color:#dee2e6;}.active,.active:hover{color:#fff;background-color:#C8261C;border-color:#C8261C;}"
    document.getElementsByTagName('head').item(0).appendChild(style);

    /*  
     需要一个<ul id="pagination"></ul>标签
     total; // 总数据的数量
     pageSize; // 一页显示数量
     pageIndex; // 当前页 
    */
    let totalPage = Math.ceil(total / pageSize);  // 总页数
    function initPagination() {
        let pagination = document.querySelector('#pagination');
        let pageHtml;  // 按钮内容
        let prevButton = `<li class='list-items' id='btnPrev'>«</li>` // 向左
        let nextButton = `<li class='list-items' id='btnNext'>»</li>`// 向右
        let firstPage = `<li class='list-items' pagenumber=1>1</li>`// 第一页
        let lastPage = `<li class='list-items' pagenumber=${totalPage}>${totalPage}</li>` // 最后一页
        let leftOmitPage = `<li class='list-items' id='btnGoLeft'>...</li>` // 省略号
        let rightOmitPage = `<li class='list-items' id='btnGoRight'>...</li>` // 省略号
        let pageTips = `<div style='line-height:38px' id='pageTips'>${pageIndex} - ${totalPage} of ${total} items</div > `;
        pageHtml = prevButton; // 添加向左的按钮

        /* 生成页数 */
        if (totalPage <= 10) {  // 总页数小于等于10页全部显示
            for (let i = 1; i <= totalPage; i++) {
                pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
            }
        } else if (pageIndex <= 8) { //总页数大于10且当前页远离总页数
            for (let i = 1; i <= 9; i++) {
                pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
            }
            pageHtml += rightOmitPage;
            pageHtml += lastPage;
        } else if (pageIndex > totalPage - 7) { //总页数大于10且当前页接近总页数
            pageHtml += firstPage;
            pageHtml += leftOmitPage;
            for (let i = totalPage - 8; i <= totalPage; i++) {
                pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
            }
        } else { //除开上面两个情况 当前页在中间
            pageHtml += firstPage;
            pageHtml += leftOmitPage;
            for (let i = pageIndex - 3; i <= pageIndex + 3; i++) {
                pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
            }
            pageHtml += rightOmitPage;
            pageHtml += lastPage;
        }
        pageHtml += nextButton; // 添加向右的按钮
        pageHtml += pageTips;
        pagination.innerHTML = pageHtml;
        document.querySelector("li[pagenumber='" + pageIndex + "']").classList.add('active');

        let pagenumberBtns = document.querySelectorAll("li[pagenumber]"); // 获取所有的页码按钮

        /* 点击页码按钮进行翻页 */
        pagenumberBtns.forEach(function (elements) {
            elements.onclick = function () {
                pageIndex = Number(this.innerHTML); // 当前页
                document.querySelector("li[pagenumber='" + pageIndex + "']").classList.add('active');
                pageHtml.innerHTML = '';
                initPagination();
            }
        })

        /* 向左翻页 */
        document.getElementById('btnPrev').addEventListener("click", function () {
            if (pageIndex > 1) {
                pageIndex--;
                pageHtml.innerHTML = '';
                initPagination();
            }
        })

        /* 向右翻页 */
        document.getElementById('btnNext').addEventListener("click", function () {
            if (pageIndex < totalPage) {
                pageIndex++;
                pageHtml.innerHTML = '';
                initPagination();
            }
        })

        /* 向左快速翻页 */
        let btnGoLeft = document.getElementById('btnGoLeft');
        if (btnGoLeft) {
            btnGoLeft.addEventListener('mouseenter', function () {
                this.innerHTML = '<'
            })
            btnGoLeft.addEventListener('mouseleave', function () {
                this.innerHTML = '...'
            })
            btnGoLeft.addEventListener("click", function () {
                if (pageIndex > 10) {
                    pageIndex -= 10;
                    pageHtml.innerHTML = '';
                    initPagination();
                }
            })
        }

        /* 向右快速翻页 */
        let btnGoRight = document.getElementById('btnGoRight')
        if (btnGoRight) {
            btnGoRight.addEventListener('mouseenter', function () {
                this.innerHTML = '>'
            })
            btnGoRight.addEventListener('mouseleave', function () {
                this.innerHTML = '...'
            })
            btnGoRight.addEventListener("click", function () {
                if (pageIndex < totalPage - 10) {
                    pageIndex += 10;
                    pageHtml.innerHTML = '';
                    initPagination();
                }
            })
        }
    }
    initPagination();
}

3、实现方式和效果

  • 在引入js文件后,直接使用<script> generatePagination(1000, 10, 1);</script>,参数分别表示数据总条数,一页显示的数据条数,当前页
  • 实现效果
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-5-25 1,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、实现功能
  • 2、实现过程
    • 2.1 html页面(index.html)
      • 2.2 js逻辑(index.js)
      • 3、实现方式和效果
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档