表格数据太多,需要做成分页。因此需要写一个页码器。

1,初始化页码

获取数据之后渲染页码器,页码器初始化,小于6页的全部展示,否则展示前四页,后面是省略号,最后展示尾页。默认选中第一页,禁用前一页的箭头

  1. function setPage(pageCount = 8, rowCount = 387, rootClassName, callback) {
  2. currentPage = 1;
  3. let docModule = document.getElementsByClassName(rootClassName)[0];
  4. let numberDomLists = docModule.getElementsByClassName('number');
  5. docModule.getElementsByClassName('el-pager')[0].innerHTML = ''
  6. docModule.getElementsByClassName('el-pagination__total')[0].innerText = '共 ' + rowCount + ' 条数据';
  7. if (pageCount < 6) {
  8. for (let i = 1; i <= pageCount; i++) {
  9. let elem = document.createElement('li');
  10. elem.className = 'number';
  11. elem.innerText = i;
  12. elem.setAttribute('key', i)
  13. docModule.getElementsByClassName('el-pager')[0].appendChild(elem)
  14. }
  15. } else {
  16. for (let i = 1; i <= 4; i++) {
  17. let elem = document.createElement('li');
  18. elem.className = 'number';
  19. elem.innerText = i;
  20. elem.setAttribute('key', i)
  21. docModule.getElementsByClassName('el-pager')[0].appendChild(elem)
  22. }
  23. let elemMore = document.createElement('li');
  24. elemMore.className = 'el-icon more btn-quicknext el-icon-more';
  25. elemMore.setAttribute('key', '')
  26. docModule.getElementsByClassName('el-pager')[0].appendChild(elemMore);
  27. let elemLast = document.createElement('li');
  28. elemLast.className = 'number';
  29. elemLast.innerText = pageCount;
  30. elemLast.setAttribute('key', pageCount)
  31. docModule.getElementsByClassName('el-pager')[0].appendChild(elemLast)
  32. }
  33. numberDomLists[currentPage - 1].className = 'number active';
  34. docModule.getElementsByClassName('btn-prev')[0].disabled = 'true';
  35. }

2,切换页码,在初始化后为页码绑定点击事件:

  1. // 绑定页码点击事件
  2. function bindPagerEvent(numberDomLists, callback) {
  3. for (let i = 0; i < numberDomLists.length; i++) {
  4. numberDomLists[i].onclick = function () {
  5. setPageActive(this, numberDomLists);
  6. callback({
  7. newPage: numberDomLists[i].innerText
  8. })
  9. }
  10. }
  11. }
  12. // 页码点击事件
  13. function setPageActive(obj, numberDomLists) {
  14. for (let i = 0; i < numberDomLists.length; i++) {
  15. numberDomLists[i].className = 'number';
  16. }
  17. obj.className = 'number active'
  18. }

3,初始化之后的页码器中存在省略号,点击省略号往后展示一页,前面出现省略号(保留首页),直到往后展示到倒数第二页:

  1. // 页码器之间往后翻页
  2. function bindMoreIconEvent(numberDomLists, pageCount, docModule, callback) {
  3. let quicknextElem = docModule.getElementsByClassName('btn-quicknext')[0];
  4. if (quicknextElem) {
  5. quicknextElem.onclick = function () {
  6. linkNextPage(this, numberDomLists, pageCount, docModule, callback);
  7. }
  8. }
  9. }
  10. // 往后翻页
  11. function linkNextPage(obj, numberDomLists, pageCount, docModule, callback) {
  12. // 如果第二个数字是2,改为...并移除3,增加5,否则,移除dom
  13. let secondPage = numberDomLists[1];
  14. if (secondPage.innerText == 2) {
  15. secondPage.className = 'el-icon more btn-quickprev el-icon-more';
  16. secondPage.innerText = '';
  17. secondPage.setAttribute('key', '')
  18. bindPreIconEvent(numberDomLists, pageCount, docModule, callback);
  19. docModule.getElementsByClassName('el-pager')[0].removeChild(numberDomLists[1]);
  20. } else {
  21. docModule.getElementsByClassName('el-pager')[0].removeChild(secondPage);
  22. }
  23. // 如果倒数第二个数字比总页数少2,改为总页数-1,否则在前面追加dom
  24. if (obj.previousElementSibling.innerText < pageCount - 2) {
  25. let elem = document.createElement('li');
  26. elem.className = 'number';
  27. elem.innerText = Number(obj.previousElementSibling.innerText) + 1;
  28. elem.setAttribute('key', Number(obj.previousElementSibling.innerText) + 1)
  29. docModule.getElementsByClassName('el-pager')[0].insertBefore(elem, obj);
  30. } else {
  31. obj.className = 'number';
  32. obj.innerText = pageCount - 1;
  33. obj.setAttribute('key', pageCount - 1)
  34. }
  35. }

4,点击首页后的省略号往前展示一页,往后缩减一页,直到往前展示到第二页:

  1. // 页码器之间往前翻页
  2. function bindPreIconEvent(numberDomLists, pageCount, docModule, callback) {
  3. let quickprevElem = docModule.getElementsByClassName('btn-quickprev')[0];
  4. if (quickprevElem) {
  5. quickprevElem.onclick = function () {
  6. linkPrevPage(this, numberDomLists, pageCount, docModule, callback);
  7. }
  8. }
  9. }
  10. // 往前翻页
  11. function linkPrevPage(obj, numberDomLists, pageCount, docModule, callback) {
  12. // 如果第二个数字是4,改为2
  13. if (obj.nextElementSibling.innerText == 4) {
  14. obj.className = 'number';
  15. obj.innerText = '2';
  16. obj.setAttribute('key', '2')
  17. }
  18. // 大于等于4 obj后追加一个dom
  19. let elem = document.createElement('li');
  20. elem.className = 'number';
  21. elem.innerText = Number(obj.nextElementSibling.innerText) - 1;
  22. elem.setAttribute('key', Number(obj.nextElementSibling.innerText) - 1);
  23. docModule.getElementsByClassName('el-pager')[0].insertBefore(elem, obj.nextElementSibling);
  24.  
  25. // 如果倒数第二个数字是总数-1,改为...,否则移除dom
  26. let len = numberDomLists.length;
  27. let lastSecondPage = numberDomLists[len - 2];
  28. if (lastSecondPage.innerText == pageCount - 1) {
  29. lastSecondPage.className = 'el-icon more btn-quicknext el-icon-more';
  30. lastSecondPage.innerText = '';
  31. lastSecondPage.setAttribute('key', '')
  32. bindMoreIconEvent(numberDomLists, pageCount, docModule, callback);
  33. } else {
  34. docModule.getElementsByClassName('el-pager')[0].removeChild(lastSecondPage);
  35. }
  36. }

5,如果初始化的时候就出现了省略号,那么需要在初始化的时候就绑定省略号的点击事件:

  1. bindMoreIconEvent(numberDomLists, pageCount, docModule, callback);

6,由于页码器一直在变化,但操作者对页码的点击事件随时可能发生,所以每次页码器变动之后都需要重新为页码绑定点击事件:

  1. bindPagerEvent(numberDomLists, callback);

7,点击前一页、下一页:

当点击前一页,当前页码自减一,如果页码器的第二个数字比当前页大,往前翻一页,后面的页码器缩减一页,相当于点击首页后面代表往前翻页的省略号;

同理,当点击下一页,相当于往后翻页;

如果往前翻页或者往后翻页中没有省略号,表示指定页码已经在当前页面中展示,直接触发点击事件,选中该页。

通过自定义属性查找dom:
  1. // 通过自定义属性查找dom
  2. function getElementsByAttr(rootClassName, className, attr, value) {
  3. let docModule = document.getElementsByClassName(rootClassName)[0];
  4. let classList = docModule.getElementsByClassName(className);
  5. let doms = [];
  6. for (let i = 0; i < classList.length; i++) {
  7. if (classList[i].getAttribute(attr) == value) {
  8. doms.push(classList[i])
  9. }
  10. }
  11. return doms;
  12. }

选中页码:

  1. let targetPage = getElementsByAttr('sqlscript-container', 'number', 'key', currentPage);
  2. targetPage[0] && targetPage[0].onclick()

8,page.js使用:

  1. <div role="pagination" aria-label="pagination" class="el-pagination pagination hort-box" data-v-b770da44="">
  2. <span class="el-pagination__total"></span>
  3. <button type="button" class="btn-prev" onclick="handlePageChange('prev')">
  4. <i class="el-icon el-icon-arrow-left"></i>
  5. </button>
  6. <ul class="el-pager"></ul>
  7. <button type="button" class="btn-next" onclick="handlePageChange('next')">
  8. <i class="el-icon el-icon-arrow-right"></i>
  9. </button>
  10. </div>

  1. // 初始化页码
  2. function initPage() {
  3. setPage(pageCount, rowCount, 'sqlscript-container', function (newPageObj) {
  4. receivePageCallBack(newPageObj);
  5. })
  6. }

  1. // 页码器回调
  2. function receivePageCallBack(newPageObj) {
  3. currentPage = newPageObj.newPage;
  4. if (!newPageObj.flag) {
  5. document.getElementsByClassName('btn-prev')[0].removeAttribute('disabled');
  6. document.getElementsByClassName('btn-next')[0].removeAttribute('disabled');
  7. if (currentPage == pageCount) {
  8. selectLastPage(pageCount, 'sqlscript-container', function (newPageObj2) {
  9. receivePageCallBack(newPageObj2);
  10. })
  11. } else if (currentPage == 1) {
  12. initPage();
  13. }
  14. getRunData()
  15. console.log(currentPage)
  16. } else {
  17. let numberDomLists = document.getElementsByClassName('number');
  18. numberDomLists[numberDomLists.length - 2].onclick()
  19. }
  20. }

  1. // 页码器跳转
  2. function handlePageChange(val) {
  3. let numberDomLists = document.getElementsByClassName('number');
  4. if (val === 'prev') {
  5. currentPage--;
  6. if (currentPage > 1) {
  7. if (numberDomLists[1].innerText > currentPage) {
  8. linkPrevPage(
  9. document.getElementsByClassName('btn-quickprev')[0],
  10. numberDomLists,
  11. pageCount,
  12. document.getElementsByClassName('sqlscript-container')[0],
  13. function (newPageObj) {
  14. receivePageCallBack(newPageObj);
  15. })
  16. }
  17. }
  18. } else if (val === 'next') {
  19. currentPage++;
  20. if (currentPage < pageCount) {
  21. if (numberDomLists[numberDomLists.length - 2].innerText < currentPage) {
  22. linkNextPage(
  23. document.getElementsByClassName('btn-quicknext')[0],
  24. numberDomLists,
  25. pageCount,
  26. document.getElementsByClassName('sqlscript-container')[0],
  27. function (newPageObj) {
  28. receivePageCallBack(newPageObj);
  29. })
  30. }
  31. }
  32. }
  33. let targetPage = getElementsByAttr('sqlscript-container', 'number', 'key', currentPage);
  34. targetPage[0] && targetPage[0].onclick()
  35. }

六、js创建页码器:分页、上一页下一页、省略页码的更多相关文章

  1. css -- 映像 ,分页(上一页下一页)

    1.映像:-webkit-box-reflect:blow 2px -webkit-gradient( linear, left top, left bottom, from(transparent) ...

  2. eayUi panel实现上一页下一页

    function 是为了第一次加载的时候显示页面 butt1和butt2触发上一页下一页,后面绑定参数即可 问题:.panel({href:href})到后台的时候会请求两次,这个问题还没有解决 把 ...

  3. Unity上一页下一页切换功能实现源码(仅供参考)

    在做项目时我们有时需要实现切换上一页下一页图片,切换上一首下一首歌曲等等类似的功能.这里写了个简单的实现源码(仅供参考),要是有更好的方法欢迎提出来,共同进步~ 以切换上一页下一页图片为例: usin ...

  4. ASP.NET MVC中使用MvcPager异步分页+在分页中复选框下一页上一页也保持选中

    ASP.NET MVC 分页使用的是作者杨涛的MvcPager分页控件  地址:http://www.webdiyer.com/mvcpager/demos/ajaxpaging/ 这个分页控件在里面 ...

  5. GridView利用PagerTemplate做分页显示设置上一页下一页转到下拉转页

    效果如图: 代码如下: aspx页: <asp:GridView ID="GridViewMain" runat="server" OnPageIndex ...

  6. php网页上一页下一页翻页

    这几天做项目因为数据太多,需要对信息进行上下翻页展示,就自己写了翻页的代码 大致功能就是页面只显示几条信息,按上一页.下一页切换内容,当显示第一页时上一页和首页选项不可选,当页面加载到最后一页时下一页 ...

  7. Python - Django - 添加首页尾页上一页下一页

    添加首页和尾页: views.py: from django.shortcuts import render from app01 import models def book_list(reques ...

  8. Android ListView上拉获取下一页

    关于ListView上拉刷新的需求很多,实现方式也多种多样. 一般是简单的通过一个page变量来控制当前请求的页数,然后上拉的时候就发送请求. 实现出来后,经过测试哥的折腾,发现有诸多细节没有处理好, ...

  9. jsp实现上一页下一页翻页功能

    前段时间一直忙于期末考试和找实习,好久没写博客了. 这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客. 要实现翻页功能,只需 ...

  10. jquery实现上一页下一页

    注:文章转载于肖肖的博客: 简单说一下思路:就是把每个页面都用position:absolute的属性使每个页面都从叠在一起.然后通过$().hide()隐藏和$().show()显示.点击当前页中的 ...

随机推荐

  1. 前端BootStrap框架和django创建项目和app

    1.JS 正则 test - 判断字符串是否符合规定的正则 rep = /\d+/; rep.test("asdfoiklfasdf89asdfasdf") # true rep ...

  2. 从零搭建hadoop集群之安装jdk

    卸载系统自带的OpenJDK以及相关的java文件 1. 查询系统自带的OpenJDK版本信息 [root@hadoop01 ~]# java -version #查询系统自带的OpenJDK版本信息 ...

  3. liunx设置QQ邮箱报警

    1.先安装一个软件包, 2.先登录电脑QQ邮箱->设置->账户->账户安全前两条选择开启,并生成授权码,授权码很重要很重要,千万不要泄露. 3.在liunx命令行输入  :vi /e ...

  4. Oracle JDK 和 OpenJDK 有什么区别?

    OpenJDK是Sun在2006年末把Java开源而形成的项目,这里的"开源"是通常意义上的源码开放形式,即源码是可被复用的,例如IcedTea.UltraViolet都是从Ope ...

  5. vue super flow 多种形状

    1 <template> 2 <v-container class="workflow-container" grid-list-xl fluid> 3 & ...

  6. rclone挂载对象存储到本地

    一.原理图 二.挂载步骤 1.申请对象存储资源 (略) 2.下载rclone https://rclone.org/downloads/ 3.上传服务器,解压并安装 sudo unzip rclone ...

  7. How to Fix SSH Failed Permission Denied

    https://phoenixnap.com/kb/ssh-permission-denied-publickey

  8. Mongodb设置账号密码登录

    Mongodb设置.首先设置Data目类和Log目录,然后新建mongodb.conf,设置内容大体如下 port = 27017 #数据目录 dbpath = /usr/softs/data/db ...

  9. C# Linq查本集合中不包含于另一个集合的元素

    public void Linq() { List<Product> products = GetProductList(); List<Customer> customers ...

  10. python manage.py loaddata dumpdata 用于导出和导入数据库中的数据

    1.数据导出python  manage.py  dumpdata python manage.py dumpdata [appname] > appname_data.json 指定appna ...