六、js创建页码器:分页、上一页下一页、省略页码
表格数据太多,需要做成分页。因此需要写一个页码器。
1,初始化页码
获取数据之后渲染页码器,页码器初始化,小于6页的全部展示,否则展示前四页,后面是省略号,最后展示尾页。默认选中第一页,禁用前一页的箭头


- function setPage(pageCount = 8, rowCount = 387, rootClassName, callback) {
- currentPage = 1;
- let docModule = document.getElementsByClassName(rootClassName)[0];
- let numberDomLists = docModule.getElementsByClassName('number');
- docModule.getElementsByClassName('el-pager')[0].innerHTML = ''
- docModule.getElementsByClassName('el-pagination__total')[0].innerText = '共 ' + rowCount + ' 条数据';
- if (pageCount < 6) {
- for (let i = 1; i <= pageCount; i++) {
- let elem = document.createElement('li');
- elem.className = 'number';
- elem.innerText = i;
- elem.setAttribute('key', i)
- docModule.getElementsByClassName('el-pager')[0].appendChild(elem)
- }
- } else {
- for (let i = 1; i <= 4; i++) {
- let elem = document.createElement('li');
- elem.className = 'number';
- elem.innerText = i;
- elem.setAttribute('key', i)
- docModule.getElementsByClassName('el-pager')[0].appendChild(elem)
- }
- let elemMore = document.createElement('li');
- elemMore.className = 'el-icon more btn-quicknext el-icon-more';
- elemMore.setAttribute('key', '')
- docModule.getElementsByClassName('el-pager')[0].appendChild(elemMore);
- let elemLast = document.createElement('li');
- elemLast.className = 'number';
- elemLast.innerText = pageCount;
- elemLast.setAttribute('key', pageCount)
- docModule.getElementsByClassName('el-pager')[0].appendChild(elemLast)
- }
- numberDomLists[currentPage - 1].className = 'number active';
- docModule.getElementsByClassName('btn-prev')[0].disabled = 'true';
- }
2,切换页码,在初始化后为页码绑定点击事件:


- // 绑定页码点击事件
- function bindPagerEvent(numberDomLists, callback) {
- for (let i = 0; i < numberDomLists.length; i++) {
- numberDomLists[i].onclick = function () {
- setPageActive(this, numberDomLists);
- callback({
- newPage: numberDomLists[i].innerText
- })
- }
- }
- }
- // 页码点击事件
- function setPageActive(obj, numberDomLists) {
- for (let i = 0; i < numberDomLists.length; i++) {
- numberDomLists[i].className = 'number';
- }
- obj.className = 'number active'
- }
3,初始化之后的页码器中存在省略号,点击省略号往后展示一页,前面出现省略号(保留首页),直到往后展示到倒数第二页:


- // 页码器之间往后翻页
- function bindMoreIconEvent(numberDomLists, pageCount, docModule, callback) {
- let quicknextElem = docModule.getElementsByClassName('btn-quicknext')[0];
- if (quicknextElem) {
- quicknextElem.onclick = function () {
- linkNextPage(this, numberDomLists, pageCount, docModule, callback);
- }
- }
- }
- // 往后翻页
- function linkNextPage(obj, numberDomLists, pageCount, docModule, callback) {
- // 如果第二个数字是2,改为...并移除3,增加5,否则,移除dom
- let secondPage = numberDomLists[1];
- if (secondPage.innerText == 2) {
- secondPage.className = 'el-icon more btn-quickprev el-icon-more';
- secondPage.innerText = '';
- secondPage.setAttribute('key', '')
- bindPreIconEvent(numberDomLists, pageCount, docModule, callback);
- docModule.getElementsByClassName('el-pager')[0].removeChild(numberDomLists[1]);
- } else {
- docModule.getElementsByClassName('el-pager')[0].removeChild(secondPage);
- }
- // 如果倒数第二个数字比总页数少2,改为总页数-1,否则在前面追加dom
- if (obj.previousElementSibling.innerText < pageCount - 2) {
- let elem = document.createElement('li');
- elem.className = 'number';
- elem.innerText = Number(obj.previousElementSibling.innerText) + 1;
- elem.setAttribute('key', Number(obj.previousElementSibling.innerText) + 1)
- docModule.getElementsByClassName('el-pager')[0].insertBefore(elem, obj);
- } else {
- obj.className = 'number';
- obj.innerText = pageCount - 1;
- obj.setAttribute('key', pageCount - 1)
- }
- }
4,点击首页后的省略号往前展示一页,往后缩减一页,直到往前展示到第二页:


- // 页码器之间往前翻页
- function bindPreIconEvent(numberDomLists, pageCount, docModule, callback) {
- let quickprevElem = docModule.getElementsByClassName('btn-quickprev')[0];
- if (quickprevElem) {
- quickprevElem.onclick = function () {
- linkPrevPage(this, numberDomLists, pageCount, docModule, callback);
- }
- }
- }
- // 往前翻页
- function linkPrevPage(obj, numberDomLists, pageCount, docModule, callback) {
- // 如果第二个数字是4,改为2
- if (obj.nextElementSibling.innerText == 4) {
- obj.className = 'number';
- obj.innerText = '2';
- obj.setAttribute('key', '2')
- }
- // 大于等于4 obj后追加一个dom
- let elem = document.createElement('li');
- elem.className = 'number';
- elem.innerText = Number(obj.nextElementSibling.innerText) - 1;
- elem.setAttribute('key', Number(obj.nextElementSibling.innerText) - 1);
- docModule.getElementsByClassName('el-pager')[0].insertBefore(elem, obj.nextElementSibling);
- // 如果倒数第二个数字是总数-1,改为...,否则移除dom
- let len = numberDomLists.length;
- let lastSecondPage = numberDomLists[len - 2];
- if (lastSecondPage.innerText == pageCount - 1) {
- lastSecondPage.className = 'el-icon more btn-quicknext el-icon-more';
- lastSecondPage.innerText = '';
- lastSecondPage.setAttribute('key', '')
- bindMoreIconEvent(numberDomLists, pageCount, docModule, callback);
- } else {
- docModule.getElementsByClassName('el-pager')[0].removeChild(lastSecondPage);
- }
- }
5,如果初始化的时候就出现了省略号,那么需要在初始化的时候就绑定省略号的点击事件:
- bindMoreIconEvent(numberDomLists, pageCount, docModule, callback);
6,由于页码器一直在变化,但操作者对页码的点击事件随时可能发生,所以每次页码器变动之后都需要重新为页码绑定点击事件:
- bindPagerEvent(numberDomLists, callback);
7,点击前一页、下一页:
当点击前一页,当前页码自减一,如果页码器的第二个数字比当前页大,往前翻一页,后面的页码器缩减一页,相当于点击首页后面代表往前翻页的省略号;
同理,当点击下一页,相当于往后翻页;
如果往前翻页或者往后翻页中没有省略号,表示指定页码已经在当前页面中展示,直接触发点击事件,选中该页。
- // 通过自定义属性查找dom
- function getElementsByAttr(rootClassName, className, attr, value) {
- let docModule = document.getElementsByClassName(rootClassName)[0];
- let classList = docModule.getElementsByClassName(className);
- let doms = [];
- for (let i = 0; i < classList.length; i++) {
- if (classList[i].getAttribute(attr) == value) {
- doms.push(classList[i])
- }
- }
- return doms;
- }
选中页码:
- let targetPage = getElementsByAttr('sqlscript-container', 'number', 'key', currentPage);
- targetPage[0] && targetPage[0].onclick()
8,page.js使用:
- <div role="pagination" aria-label="pagination" class="el-pagination pagination hort-box" data-v-b770da44="">
- <span class="el-pagination__total"></span>
- <button type="button" class="btn-prev" onclick="handlePageChange('prev')">
- <i class="el-icon el-icon-arrow-left"></i>
- </button>
- <ul class="el-pager"></ul>
- <button type="button" class="btn-next" onclick="handlePageChange('next')">
- <i class="el-icon el-icon-arrow-right"></i>
- </button>
- </div>


- // 初始化页码
- function initPage() {
- setPage(pageCount, rowCount, 'sqlscript-container', function (newPageObj) {
- receivePageCallBack(newPageObj);
- })
- }


- // 页码器回调
- function receivePageCallBack(newPageObj) {
- currentPage = newPageObj.newPage;
- if (!newPageObj.flag) {
- document.getElementsByClassName('btn-prev')[0].removeAttribute('disabled');
- document.getElementsByClassName('btn-next')[0].removeAttribute('disabled');
- if (currentPage == pageCount) {
- selectLastPage(pageCount, 'sqlscript-container', function (newPageObj2) {
- receivePageCallBack(newPageObj2);
- })
- } else if (currentPage == 1) {
- initPage();
- }
- getRunData()
- console.log(currentPage)
- } else {
- let numberDomLists = document.getElementsByClassName('number');
- numberDomLists[numberDomLists.length - 2].onclick()
- }
- }


- // 页码器跳转
- function handlePageChange(val) {
- let numberDomLists = document.getElementsByClassName('number');
- if (val === 'prev') {
- currentPage--;
- if (currentPage > 1) {
- if (numberDomLists[1].innerText > currentPage) {
- linkPrevPage(
- document.getElementsByClassName('btn-quickprev')[0],
- numberDomLists,
- pageCount,
- document.getElementsByClassName('sqlscript-container')[0],
- function (newPageObj) {
- receivePageCallBack(newPageObj);
- })
- }
- }
- } else if (val === 'next') {
- currentPage++;
- if (currentPage < pageCount) {
- if (numberDomLists[numberDomLists.length - 2].innerText < currentPage) {
- linkNextPage(
- document.getElementsByClassName('btn-quicknext')[0],
- numberDomLists,
- pageCount,
- document.getElementsByClassName('sqlscript-container')[0],
- function (newPageObj) {
- receivePageCallBack(newPageObj);
- })
- }
- }
- }
- let targetPage = getElementsByAttr('sqlscript-container', 'number', 'key', currentPage);
- targetPage[0] && targetPage[0].onclick()
- }
六、js创建页码器:分页、上一页下一页、省略页码的更多相关文章
- css -- 映像 ,分页(上一页下一页)
1.映像:-webkit-box-reflect:blow 2px -webkit-gradient( linear, left top, left bottom, from(transparent) ...
- eayUi panel实现上一页下一页
function 是为了第一次加载的时候显示页面 butt1和butt2触发上一页下一页,后面绑定参数即可 问题:.panel({href:href})到后台的时候会请求两次,这个问题还没有解决 把 ...
- Unity上一页下一页切换功能实现源码(仅供参考)
在做项目时我们有时需要实现切换上一页下一页图片,切换上一首下一首歌曲等等类似的功能.这里写了个简单的实现源码(仅供参考),要是有更好的方法欢迎提出来,共同进步~ 以切换上一页下一页图片为例: usin ...
- ASP.NET MVC中使用MvcPager异步分页+在分页中复选框下一页上一页也保持选中
ASP.NET MVC 分页使用的是作者杨涛的MvcPager分页控件 地址:http://www.webdiyer.com/mvcpager/demos/ajaxpaging/ 这个分页控件在里面 ...
- GridView利用PagerTemplate做分页显示设置上一页下一页转到下拉转页
效果如图: 代码如下: aspx页: <asp:GridView ID="GridViewMain" runat="server" OnPageIndex ...
- php网页上一页下一页翻页
这几天做项目因为数据太多,需要对信息进行上下翻页展示,就自己写了翻页的代码 大致功能就是页面只显示几条信息,按上一页.下一页切换内容,当显示第一页时上一页和首页选项不可选,当页面加载到最后一页时下一页 ...
- Python - Django - 添加首页尾页上一页下一页
添加首页和尾页: views.py: from django.shortcuts import render from app01 import models def book_list(reques ...
- Android ListView上拉获取下一页
关于ListView上拉刷新的需求很多,实现方式也多种多样. 一般是简单的通过一个page变量来控制当前请求的页数,然后上拉的时候就发送请求. 实现出来后,经过测试哥的折腾,发现有诸多细节没有处理好, ...
- jsp实现上一页下一页翻页功能
前段时间一直忙于期末考试和找实习,好久没写博客了. 这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客. 要实现翻页功能,只需 ...
- jquery实现上一页下一页
注:文章转载于肖肖的博客: 简单说一下思路:就是把每个页面都用position:absolute的属性使每个页面都从叠在一起.然后通过$().hide()隐藏和$().show()显示.点击当前页中的 ...
随机推荐
- 前端BootStrap框架和django创建项目和app
1.JS 正则 test - 判断字符串是否符合规定的正则 rep = /\d+/; rep.test("asdfoiklfasdf89asdfasdf") # true rep ...
- 从零搭建hadoop集群之安装jdk
卸载系统自带的OpenJDK以及相关的java文件 1. 查询系统自带的OpenJDK版本信息 [root@hadoop01 ~]# java -version #查询系统自带的OpenJDK版本信息 ...
- liunx设置QQ邮箱报警
1.先安装一个软件包, 2.先登录电脑QQ邮箱->设置->账户->账户安全前两条选择开启,并生成授权码,授权码很重要很重要,千万不要泄露. 3.在liunx命令行输入 :vi /e ...
- Oracle JDK 和 OpenJDK 有什么区别?
OpenJDK是Sun在2006年末把Java开源而形成的项目,这里的"开源"是通常意义上的源码开放形式,即源码是可被复用的,例如IcedTea.UltraViolet都是从Ope ...
- vue super flow 多种形状
1 <template> 2 <v-container class="workflow-container" grid-list-xl fluid> 3 & ...
- rclone挂载对象存储到本地
一.原理图 二.挂载步骤 1.申请对象存储资源 (略) 2.下载rclone https://rclone.org/downloads/ 3.上传服务器,解压并安装 sudo unzip rclone ...
- How to Fix SSH Failed Permission Denied
https://phoenixnap.com/kb/ssh-permission-denied-publickey
- Mongodb设置账号密码登录
Mongodb设置.首先设置Data目类和Log目录,然后新建mongodb.conf,设置内容大体如下 port = 27017 #数据目录 dbpath = /usr/softs/data/db ...
- C# Linq查本集合中不包含于另一个集合的元素
public void Linq() { List<Product> products = GetProductList(); List<Customer> customers ...
- python manage.py loaddata dumpdata 用于导出和导入数据库中的数据
1.数据导出python manage.py dumpdata python manage.py dumpdata [appname] > appname_data.json 指定appna ...