1.html文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  10. <style>
  11.     div {
  12.         width: 800px;
  13.         height: 40px;
  14.         border: 1px solid black;
  15.         margin: 30px auto;
  16.         user-select: none;
  17.     }
  18. </style>
  19.  
  20. <body>
  21.     <div id="div1"></div>
  22.     <div id="div2"></div>
  23.  
  24.     <script src="./navg.js"></script>
  25.     <script>
  26.         new Navg('#div1', {
  27.             pageTag: {
  28.                 first: '首页1',
  29.                 prev: '上一页1',
  30.                 list: null,
  31.                 next: '下一页1',
  32.                 last: '末页1',
  33.             },
  34.  
  35.             pageInfo: {
  36.                 pageNum: 5,     // 当前页数
  37.                 pageSize: 10,    // 每页显示条数
  38.                 totalData: 1000, // 总条数
  39.                 totalPage: 100,  // 总页数 = 向上取整（总条数 / 每页显示条数）
  40.             }
  41.         },() => {
  42.             console.log(11)
  43.         });
  44.  
  45.         new Navg('#div2', {
  46.             pageTag: {
  47.                 first: '首页',
  48.                 prev: '上一页',
  49.                 list: null,
  50.                 next: '下一页',
  51.                 last: '末页',
  52.             },
  53.  
  54.             pageInfo: {
  55.                 pageNum: 2,     // 当前页数
  56.                 pageSize: 10,    // 每页显示条数
  57.                 totalData: 1000, // 总条数
  58.                 totalPage: 100,  // 总页数 = 向上取整（总条数 / 每页显示条数）
  59.             }
  60.         });
  61.     </script>
  62. </body>
  63.  
  64. </html>

2.js文件

  1. function Navg(ele, options, calback) {
  2.  
  3.     this.options = options;
  4.     this.calback = calback || function () { };
  5.     // ## 默认数据
  6.     this.defaultOptions = {
  7.         pageTag: {
  8.             first: '首页',
  9.             prev: '上一页',
  10.             list: null,
  11.             next: '下一页',
  12.             last: '末页',
  13.         },
  14.  
  15.         pageInfo: {
  16.             pageNum: 2,     // 当前页数
  17.             pageSize: 10,    // 每页显示条数
  18.             totalData: 1000, // 总条数
  19.             totalPage: 100,  // 总页数 = 向上取整（总条数 / 每页显示条数）
  20.         }
  21.     }
  22.     this.defaultOptions.pageInfo.totalPage = Math.ceil(this.defaultOptions.pageInfo.totalData / this.defaultOptions.pageInfo.pageSize)
  23.  
  24.     //获取页面属性
  25.     this.divObj = document.querySelector(ele)
  26.     this.divObj.style.display = 'flex'
  27.     this.divObj.style.justifyContent = 'center'
  28.     this.divObj.style.alignItems = 'center'
  29.  
  30.     // 重置数据
  31.     this.setDefalutOptions();
  32.     // 调用
  33.     this.createpage();
  34.     // 初始化完成后绑定事件
  35.     this.clickEvent();
  36.  
  37. }
  38. // 设置默认数据
  39. Navg.prototype.setDefalutOptions = function () {
  40.     // 判断用户是否传值
  41.     if(this.options == undefined || (Object.keys(this.options).length == 0)){
  42.         return;
  43.     }
  44.     // pageTag
  45.     this.defaultOptions.pageTag.first = this.options.pageTag.first;
  46.     this.defaultOptions.pageTag.prev = this.options.pageTag.prev;
  47.     this.defaultOptions.pageTag.list = this.options.pageTag.list;
  48.     this.defaultOptions.pageTag.next = this.options.pageTag.next;
  49.     this.defaultOptions.pageTag.last = this.options.pageTag.last;
  50.  
  51.     // pageInfo
  52.     this.defaultOptions.pageInfo.pageNum = this.options.pageInfo.pageNum;
  53.     this.defaultOptions.pageInfo.pageSize = this.options.pageInfo.pageSize;
  54.     this.defaultOptions.pageInfo.totalData = this.options.pageInfo.totalData;
  55.     this.defaultOptions.pageInfo.totalPage = this.options.pageInfo.totalPage;
  56.  
  57. }
  58. // 创建分页标签
  59. Navg.prototype.createpagenum = function () {
  60.  
  61.     let pageInfo = this.defaultOptions.pageInfo;
  62.  
  63.     if (pageInfo.pageNum < 5) {
  64.         for (let i = 1; i <= 5; i++) {
  65.             this.createP(i, ele = 'p')
  66.         }
  67.         this.createP('...', 'span')
  68.         for (let i = pageInfo.totalPage - 1; i <= pageInfo.totalPage; i++) {
  69.             this.createP(i, ele = 'p')
  70.         }
  71.     } else if (pageInfo.pageNum == 5) {
  72.         for (let i = 1; i <= 7; i++) {
  73.             this.createP(i, ele = 'p')
  74.         }
  75.         this.createP('...', 'span')
  76.         for (let i = pageInfo.totalPage - 1; i <= pageInfo.totalPage; i++) {
  77.             this.createP(i, ele = 'p')
  78.         }
  79.     } else if (pageInfo.pageNum > 5 && pageInfo.pageNum <= pageInfo.totalPage - 4) {
  80.         this.createP(1)
  81.         this.createP(2)
  82.  
  83.         this.createP('...', 'span')
  84.         for (let i = parseInt(pageInfo.pageNum) - 2; i <= parseInt(pageInfo.pageNum) + 2; i++) {
  85.             this.createP(i, ele = 'p')
  86.         }
  87.         this.createP('...', 'span')
  88.         for (let i = pageInfo.totalPage - 1; i <= pageInfo.totalPage; i++) {
  89.             this.createP(i, ele = 'p')
  90.         }
  91.     } else if (pageInfo.pageNum >= pageInfo.totalPage - 4) {
  92.         this.createP(1)
  93.         this.createP(2)
  94.         this.createP('...', 'span')
  95.         this.createP('...', 'span')
  96.         for (let i = pageInfo.totalPage - 4; i <= pageInfo.totalPage; i++) {
  97.             this.createP(i, ele = 'p')
  98.         }
  99.     }
  100. }
  101.  
  102. // 创建分页标签
  103. Navg.prototype.createpage = function () {
  104.     let pageTag = this.defaultOptions.pageTag;
  105.     let pageInfo = this.defaultOptions.pageInfo;
  106.     let divObj = this.divObj;
  107.  
  108.     divObj.innerHTML = '';
  109.     for (let attr in pageTag) {
  110.         let pObj = document.createElement('p')
  111.         let textObj = document.createTextNode(pageTag[attr])
  112.         if (attr == 'list') {
  113.             pageTag.list = pObj
  114.         } else {
  115.             pObj.appendChild(textObj)
  116.             pObj.style.border = '1px solid black'
  117.             pObj.style.margin = '0 5px'
  118.             pObj.style.padding = '0 5px'
  119.             pObj.style.display = 'inline-block'
  120.         }
  121.         divObj.appendChild(pObj)
  122.     }
  123.     //禁用
  124.  
  125.     let pObjs = this.divObj.querySelectorAll('p')
  126.     if (pageInfo.pageNum == 1) {
  127.         pObjs[0].style.background = '#ccc'
  128.         pObjs[1].style.background = '#ccc'
  129.     }
  130.     if (pageInfo.pageNum == pageInfo.totalPage) {
  131.         pObjs[3].style.background = '#ccc'
  132.         pObjs[4].style.background = '#ccc'
  133.     }
  134.     this.createpagenum()
  135.     this.calback();
  136. }
  137.  
  138. // // ##创建P标签
  139. Navg.prototype.createP = function (i, ele = 'p') {
  140.     let pageInfo = this.defaultOptions.pageInfo;
  141.     let pObj = document.createElement(ele)
  142.     let textObj = document.createTextNode(i)
  143.     pObj.appendChild(textObj)
  144.     if (i == pageInfo.pageNum) {
  145.         pObj.style.background = 'skyblue'
  146.     }
  147.     if (ele != 'span') {
  148.         pObj.style.border = '1px solid black'
  149.         pObj.style.margin = '0 5px'
  150.         pObj.style.padding = '0 5px'
  151.         pObj.style.display = 'inline-block'
  152.  
  153.     }
  154.     this.defaultOptions.pageTag.list.appendChild(pObj)
  155. }
  156.  
  157. // 绑定事件
  158. Navg.prototype.clickEvent = function () {
  159.     let pageInfo = this.defaultOptions.pageInfo;
  160.     let pageTag = this.defaultOptions.pageTag;
  161.     this.divObj.addEventListener('click', (e) => {
  162.         e = e || window.event
  163.         let target = e.target
  164.         let tc = target.innerHTML
  165.  
  166.         if (target.nodeName == 'P' && tc == pageTag.first) {
  167.             pageInfo.pageNum = 1
  168.             this.createpage()
  169.         }
  170.  
  171.         if (target.nodeName == 'P' && tc == pageTag.prev && pageInfo.pageNum > 1) {
  172.             pageInfo.pageNum -= 1
  173.             this.createpage()
  174.         }
  175.  
  176.         if (target.nodeName == 'P' && parseInt(tc) > 0) {
  177.             pageInfo.pageNum = tc
  178.             this.createpage()
  179.         }
  180.  
  181.         if (target.nodeName == 'P' && tc == pageTag.next && pageInfo.pageNum != pageInfo.totalPage) {
  182.             pageInfo.pageNum = parseInt(pageInfo.pageNum) + 1
  183.             this.createpage()
  184.         }
  185.  
  186.         if (target.nodeName == 'P' && tc == pageTag.last) {
  187.             pageInfo.pageNum = pageInfo.totalPage
  188.             this.createpage()
  189.         }
  190.     })
  191. }
  1. 特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢

JS案例 - 分页的更多相关文章

  1. 原生js版分页插件

    之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...

  2. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  3. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  4. 纯js实现分页

    原理:所有数据已加载好,js通过遍历部分显示,实现分页效果 html代码 <html> <head> <meta charset='utf-8'> <scri ...

  5. 单篇文章JS模拟分页

    废话部分 前两天做了一个前台分页插件,支持ajax读取数据绑定前台 和 url带页码参数跳转两种方式.于是稍加改动,做了一个单篇文章js模拟分页的代码,为什么说是模拟分页呢?因为在服务器响应HTML请 ...

  6. js前端分页之jQuery

    锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...

  7. Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页

    本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能. 介绍一下Spring Data框架 spring Data : Spring 的一个子项目 ...

  8. JS表格分页(封装版)

    HTML代码: <html> <head> <meta charset='utf-8'> <script type="text/javascript ...

  9. JS重构分页

    JS重构分页 很早以前写过一个Jquery分页组件,但是当时写的组件有个缺点,当时的JS插件是这样设计的:比如:点击  -->  查询按钮 ---> 发ajax请求 返回总页数和所有数据, ...

随机推荐

  1. hdu5285-wyh2000 and pupil-（染色法二分图判定）

    http://acm.hdu.edu.cn/showproblem.php?pid=5285 题意:把互不认识的人分到两个组,第一组人数尽可能多. 题解:把互不认识的人连起来,当作二分图,二分图可能有 ...

  2. （二）STM32开发例程

    1控制LED和继电器 除了 PA11和PA12其他都可以 void setup() { pinMode(PC13, OUTPUT); pinMode(PC14, OUTPUT); pinMode(PC ...

  3. 5.服务注册与发现Consul,简学API,手动注册和删除服务

    package main import ( httptransport "github.com/go-kit/kit/transport/http" mymux "git ...

  4. Linux操作中应该注意的问题

    1.覆盖问题 (1)cp覆盖 (2)scp覆盖 (3)重定向 “>” 覆盖 (4)tar覆盖 2.磁盘问题 (1)GPT格式的分区会覆盖磁盘上原有的分区 (2)在/etc/fstab中写入完成后 ...

  5. 概率论基础知识（Probability Theory）

    概率(Probability):事件发生的可能性的数值度量. 组合(Combination):从n项中选取r项的组合数,不考虑排列顺序.组合计数法则:. 排列(Permutation):从n项中选取r ...

  6. React 获取真实Dom v8.6.2版本

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. java线程池源码的理解

    线程池 新建线程和切换线程的开销太大了,使用线程池可以节省系统资源. 线程池的关键类:ThreadPoolExecutor. 该类中包含了大量的多线程与并发处理工具,包括ReentrantLock.A ...

  8. 对称加密与非对称加密，及Hash算法

    一 , 概述 在现代密码学诞生以前,就已经有很多的加密方法了.例如,最古老的斯巴达加密棒,广泛应用于公元前7世纪的古希腊.16世纪意大利数学家卡尔达诺发明的栅格密码,基于单表代换的凯撒密码.猪圈密码, ...

  9. 2019年上海市大学生网络安全大赛两道misc WriteUp

    2019年全国大学生网络安全邀请赛暨第五届上海市大学生网络安全大赛 做出了两道Misc== 签到 题干 解题过程 题干提示一直注册成功,如果注册失败也许会出现flag. 下载下来是包含010edito ...

  10. 在spring管理的类的要注意问题

    特别时写框架的时候, 注意依赖引用,类的成员变量不要随便new,看spring容器中是否管理过,new出来的时其他的对象了