JavaScript实现带省略号的分页
1、实现功能
- 可以跳转上一页、下一页、数据过多省略号显示，点击省略号可以实现快速跳转。
- 纯js+html+css实现，引入js文件后再使用方法即可快速生成。
2、实现过程
2.1 html页面（index.html）
<!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）
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>，参数分别表示数据总条数，一页显示的数据条数，当前页 - 实现效果
JavaScript实现带省略号的分页的更多相关文章
- js 带省略号的分页源码及应用实例
一.js:pagination.js /*--说明分页div id为:changpage*/var eachPageDataNum = 10;//每页显示记录数var nowPage = 1;//当前 ...
- php 带省略号的分页
原文链接:https://blog.csdn.net/u011060253/article/details/25308455 $curpage = isset($_GET[; $page = new ...
- 自己动手用Javascript写一个无刷新分页控件
.NET技术交流群:337901356 ,欢迎您的加入! 对 于一个用户体验好的网站来说,无刷新技术是很重要的,无刷新,顾名思义,就是局部刷新数据,有用过Asp.net Web Form技术开发网页的 ...
- MVC3 带查询的分页Helper
接上篇mvc3 分页Helper. 带查询的分页Helper是在上一篇分页的基础上来的.下面看代码: 首先,在System.Web.Mvc命名空间下的自定义类HtmlPage下面添加一个用于处理“查询 ...
- C# 带偏移量自定义分页方法
/// <summary> /// 带偏移量自定义分页方法 /// </summary> /// <param name="PageSize"> ...
- mysq带条件的分页查询数据结果错误
记一次mysql分页条件查询的结果出错: 以一张用户表为例,首先我们看表中的所有数据,注意红色框住的部分: 我们使用不带条件的分页查询来查询,数据显示是OK的: SELECT id,login_nam ...
- laravel 带条件的分页查询
laravel 带条件的分页查询, 原文:http://blog.csdn.net/u011020900/article/details/52369094 bug:断点查询,点击分页,查询条件消失. ...
- springboot中使用mybatisplus自带插件实现分页
springboot中使用mybatisplus自带插件实现分页 1.导入mybatisplus分页依赖 <dependency> <groupId>com.baomidou& ...
- JS实现带省略号的长分页显示
// 刷新|生成分页信息 function refreshPageInfo(data, pageIndex) { var pageSize = data.pageCount pagingInfo.ht ...
随机推荐
- 统计 Word 文档字数的方式
描述 欲统计某文档的字数,有两种方式. "审阅"选项卡--"校对"组--字符统计 点击左下角字数统计 审阅查看字数 此步骤较为复杂,在审阅选项卡中可以查询文档的 ...
- Docker0网络及原理探究
个人观点:Docker网络通信在容器编排.集群部署中具有举足轻重的地位,(玩docker不懂docker0那就......玩不透哇)本篇分析Docker网络,并通过启动几个容器来探究Docker网络及 ...
- 分布式协同AI基准测试项目Ianvs：工业场景提升5倍研发效率
摘要:全场景可扩展的分布式协同AI基准测试项目 Ianvs(雅努斯),能为算法及服务开发者提供全面开发套件支持,以研发.衡量和优化分布式协同AI系统. 本文分享自华为云社区<KubeEdge|分 ...
- windows清理必看
清理缓存 代码如下 介绍此文件夹都是缓存文件全选删除即可 ctrl+A全选shift+del强制删除(不会添加到回收站) %temp% 找到C盘右击属性选择想要删除的文件进行清理即可 清理完点击清理系 ...
- eclipse 统一设置编码_项目工程统一设置成utf8编码_eclipse代码规范
在做项目的时候文件有的时候编码不同一 经常出现乱码,eclipse统一设置编码 可以解决项目编码混乱的问题, 设置eclipse java,jsp,css,js文件编码的方法如下: 1.在工具栏中点击 ...
- Windows 10中蓝牙鼠标连接
最近遇到了一个问题,Windows 10中的蓝牙鼠标无法连接. 在添加蓝牙鼠标的时候系统提示输入PIN码.通常在蓝牙连接两个系统的时候会需要双方输入PIN码来确认身份,但是鼠标这种设备是没有地方显示P ...
- JS 模块化 - 03 AMD 规范与 Require JS
1 AMD 规范介绍 AMD 规范,全称 Asynchronous Module Definition,异步模块定义,模块之间的依赖可以被异步加载. AMD 规范由 Common JS 规范演进而来, ...
- 使用KubeOperator安装k8s集群后,节点主机yaml文件路径
[root@k8s-develop-master-1 kubernetes]# cd /etc/kubernetes [root@k8s-develop-master-1 kubernetes]# l ...
- Maven+SpringMVC+Dubbo 简单的入门demo配置
转载自:https://cloud.tencent.com/developer/article/1010636 之前一直听说dubbo,是一个很厉害的分布式服务框架,而且巴巴将其开源,这对于咱们广大程 ...
- Java Maven项目之Nexus私服搭建和版本管理应用
转载自:https://cloud.tencent.com/developer/article/1010603 1.Nexus介绍 Nexus是一个强大的Maven仓库管理器,它极大地简化了自己内部仓 ...