1、实现功能

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

2、实现过程

2.1 html页面（index.html）

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>javascript分页</title>
  9. </head>
  11. <body>
  12.     <div>
  13.         <ul id="pagination"></ul>
  14.     </div>
  15.     <script src="./index.js"></script>
  16.     <script>
  17.         generatePagination(1000, 10, 1);
  18.     </script>
  19. </body>
  21. </html>

2.2 js逻辑（index.js）

  1. function generatePagination(total, pageSize, pageIndex) {
  3.     /* 创建style标签并设置style样式 */
  4.     let style = document.createElement('style');
  5.     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;}"
  6.     document.getElementsByTagName('head').item(0).appendChild(style);
  8.     /*
  9.      需要一个<ul id="pagination"></ul>标签
  10.      total; // 总数据的数量
  11.      pageSize; // 一页显示数量
  12.      pageIndex; // 当前页
  13.     */
  14.     let totalPage = Math.ceil(total / pageSize);  // 总页数
  15.     function initPagination() {
  16.         let pagination = document.querySelector('#pagination');
  17.         let pageHtml;  // 按钮内容
  18.         let prevButton = `<li class='list-items' id='btnPrev'>&laquo;</li>` // 向左
  19.         let nextButton = `<li class='list-items' id='btnNext'>&raquo;</li>`// 向右
  20.         let firstPage = `<li class='list-items' pagenumber=1>1</li>`// 第一页
  21.         let lastPage = `<li class='list-items' pagenumber=${totalPage}>${totalPage}</li>` // 最后一页
  22.         let leftOmitPage = `<li class='list-items' id='btnGoLeft'>...</li>` // 省略号
  23.         let rightOmitPage = `<li class='list-items' id='btnGoRight'>...</li>` // 省略号
  24.         let pageTips = `<div style='line-height:38px' id='pageTips'>${pageIndex} - ${totalPage} of ${total} items</div > `;
  25.         pageHtml = prevButton; // 添加向左的按钮
  27.         /* 生成页数 */
  28.         if (totalPage <= 10) {  // 总页数小于等于10页全部显示
  29.             for (let i = 1; i <= totalPage; i++) {
  30.                 pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
  31.             }
  32.         } else if (pageIndex <= 8) { //总页数大于10且当前页远离总页数
  33.             for (let i = 1; i <= 9; i++) {
  34.                 pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
  35.             }
  36.             pageHtml += rightOmitPage;
  37.             pageHtml += lastPage;
  38.         } else if (pageIndex > totalPage - 7) { //总页数大于10且当前页接近总页数
  39.             pageHtml += firstPage;
  40.             pageHtml += leftOmitPage;
  41.             for (let i = totalPage - 8; i <= totalPage; i++) {
  42.                 pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
  43.             }
  44.         } else { //除开上面两个情况 当前页在中间
  45.             pageHtml += firstPage;
  46.             pageHtml += leftOmitPage;
  47.             for (let i = pageIndex - 3; i <= pageIndex + 3; i++) {
  48.                 pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
  49.             }
  50.             pageHtml += rightOmitPage;
  51.             pageHtml += lastPage;
  52.         }
  53.         pageHtml += nextButton; // 添加向右的按钮
  54.         pageHtml += pageTips;
  55.         pagination.innerHTML = pageHtml;
  56.         document.querySelector("li[pagenumber='" + pageIndex + "']").classList.add('active');
  58.         let pagenumberBtns = document.querySelectorAll("li[pagenumber]"); // 获取所有的页码按钮
  60.         /* 点击页码按钮进行翻页 */
  61.         pagenumberBtns.forEach(function (elements) {
  62.             elements.onclick = function () {
  63.                 pageIndex = Number(this.innerHTML); // 当前页
  64.                 document.querySelector("li[pagenumber='" + pageIndex + "']").classList.add('active');
  65.                 pageHtml.innerHTML = '';
  66.                 initPagination();
  67.             }
  68.         })
  70.         /* 向左翻页 */
  71.         document.getElementById('btnPrev').addEventListener("click", function () {
  72.             if (pageIndex > 1) {
  73.                 pageIndex--;
  74.                 pageHtml.innerHTML = '';
  75.                 initPagination();
  76.             }
  77.         })
  79.         /* 向右翻页 */
  80.         document.getElementById('btnNext').addEventListener("click", function () {
  81.             if (pageIndex < totalPage) {
  82.                 pageIndex++;
  83.                 pageHtml.innerHTML = '';
  84.                 initPagination();
  85.             }
  86.         })
  88.         /* 向左快速翻页 */
  89.         let btnGoLeft = document.getElementById('btnGoLeft');
  90.         if (btnGoLeft) {
  91.             btnGoLeft.addEventListener('mouseenter', function () {
  92.                 this.innerHTML = '&lt;'
  93.             })
  94.             btnGoLeft.addEventListener('mouseleave', function () {
  95.                 this.innerHTML = '...'
  96.             })
  97.             btnGoLeft.addEventListener("click", function () {
  98.                 if (pageIndex > 10) {
  99.                     pageIndex -= 10;
  100.                     pageHtml.innerHTML = '';
  101.                     initPagination();
  102.                 }
  103.             })
  104.         }
  106.         /* 向右快速翻页 */
  107.         let btnGoRight = document.getElementById('btnGoRight')
  108.         if (btnGoRight) {
  109.             btnGoRight.addEventListener('mouseenter', function () {
  110.                 this.innerHTML = '&gt;'
  111.             })
  112.             btnGoRight.addEventListener('mouseleave', function () {
  113.                 this.innerHTML = '...'
  114.             })
  115.             btnGoRight.addEventListener("click", function () {
  116.                 if (pageIndex < totalPage - 10) {
  117.                     pageIndex += 10;
  118.                     pageHtml.innerHTML = '';
  119.                     initPagination();
  120.                 }
  121.             })
  122.         }
  123.     }
  124.     initPagination();
  125. }

3、实现方式和效果

  • 在引入js文件后，直接使用<script> generatePagination(1000, 10, 1);</script>，参数分别表示数据总条数，一页显示的数据条数，当前页
  • 实现效果

JavaScript实现带省略号的分页的更多相关文章

  1. js 带省略号的分页源码及应用实例

    一.js:pagination.js /*--说明分页div id为:changpage*/var eachPageDataNum = 10;//每页显示记录数var nowPage = 1;//当前 ...

  2. php 带省略号的分页

    原文链接:https://blog.csdn.net/u011060253/article/details/25308455 $curpage = isset($_GET[; $page = new ...

  3. 自己动手用Javascript写一个无刷新分页控件

    .NET技术交流群:337901356 ,欢迎您的加入! 对 于一个用户体验好的网站来说,无刷新技术是很重要的,无刷新,顾名思义,就是局部刷新数据,有用过Asp.net Web Form技术开发网页的 ...

  4. MVC3 带查询的分页Helper

    接上篇mvc3 分页Helper. 带查询的分页Helper是在上一篇分页的基础上来的.下面看代码: 首先,在System.Web.Mvc命名空间下的自定义类HtmlPage下面添加一个用于处理“查询 ...

  5. C# 带偏移量自定义分页方法

    /// <summary> /// 带偏移量自定义分页方法 /// </summary> /// <param name="PageSize"> ...

  6. mysq带条件的分页查询数据结果错误

    记一次mysql分页条件查询的结果出错: 以一张用户表为例,首先我们看表中的所有数据,注意红色框住的部分: 我们使用不带条件的分页查询来查询,数据显示是OK的: SELECT id,login_nam ...

  7. laravel 带条件的分页查询

    laravel 带条件的分页查询, 原文:http://blog.csdn.net/u011020900/article/details/52369094 bug:断点查询,点击分页,查询条件消失. ...

  8. springboot中使用mybatisplus自带插件实现分页

    springboot中使用mybatisplus自带插件实现分页 1.导入mybatisplus分页依赖 <dependency> <groupId>com.baomidou& ...

  9. JS实现带省略号的长分页显示

    // 刷新|生成分页信息 function refreshPageInfo(data, pageIndex) { var pageSize = data.pageCount pagingInfo.ht ...

随机推荐

  1. 乘风破浪，遇见最佳跨平台跨终端框架.Net Core/.Net生态 - 官方扩展集锦(Microsoft.Extensions on Nuget)

    什么是Microsoft.Extensions .NET Platform Extensions是一套.Net官方的API集合,提供了一些常用的编程模式和实用工具,例如依赖项注入.日志记录.缓存.Ho ...

  2. 刷题记录：Codeforces Round #739 (Div. 3)

    Codeforces Round #739 (Div. 3) 20210907.网址:https://codeforces.com/contest/1560. --(叹). A 不希望出现带" ...

  3. FFT快速傅立叶变换：解析wav波频图、Time Domain、Frequency Domain

    您好,此教程将教大家使用scipy.fft分析wav文件的波频图.Time Domain.Frequency Domain. 实际案例:声音降噪,去除高频. 结果: 波频图: Time Domain:

  4. 搭建docker镜像仓库(一)：使用registry搭建本地镜像仓库

    目录 一.系统环境 二.前言 三.使用registry搭建私有镜像仓库 3.1 环境介绍 3.2 k8smaster节点配置镜像仓库 3.3 k8sworker1节点配置从私有仓库上传和拉取镜像 3. ...

  5. JDBC的学习 3-1

    JDBC的学习 3-1 JDBC基本概念 快速入门 对JDBC中各个接口和类详解 JDBC : 概念 :Java DateBase Connectivity java数据库连接,Java语言操作数据库 ...

  6. 第三十一篇:vue3和vue2的不同

    好家伙 1.为什么会有vue3? Vue2和Vue3的区别 - 简书 (jianshu.com) 貌似是因为他的对手太优秀,所以他也必须进步 2.什么是api? 从文件操作开始谈API. 以C语言为例 ...

  7. KingbaseES R6集群归档备份故障分析解决案例

    案例说明: 在使用ps工具查看主库进程,发现主库'archiver'进程失败,检查sys_log日志可以发现归档失败的信息.通过sys_log日志提取归档语句手工执行归档操作,提示"当前数据 ...

  8. KingbaseES R6 集群备库网卡down测试案例

    数据库版本: test=# select version(); version ------------------------------------------------------------ ...

  9. 安装docker-compose--翻译

    Install Docker Compose 译文 安装 Docker Compose 你可以在macOS.Windows.64-bit Linux上运行 Compose 前提条件 Docker Co ...

  10. 微服务系列之网关(二) konga配置操作

    1.konga核心对象 Kong 的四大核心对象:upstream,target,service,route.下面分别说: (1)upstream,字面意思上游,实际项目理解是对某一个服务的一个或者多 ...