jQuery+bootstrap实现有省略号的数据分页
1、前言
在前端通过ajax请求数据后，可以通过bootstrap实现分页。由于bootstrap只提供分页的按钮的样式。数据分页我们需要实现页码跳转，上一页下一页，数据过多显示省略号，点击省略号能快速切换到其他页的数据。
2、实现过程
<!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>分页</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<nav aria-label="Page navigation" style="margin-top: 50px;">
<input type="text" name="pagenumber" value="1" hidden />
<ul class="pagination"></ul>
</nav>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function () {
let total = 1000; // 数据总条数
let PageIndex = 1;// 当前页
let PageSize = 10; //一页显示10条
let pageHtml = $('.pagination'); // 分页栏
let totalPage = Math.ceil(total / PageSize); // 获取到总页数
function setPages() {
let pageBtnPrev = "<li class='page-item btnPrev'><a class='page-link' aria-label='Previous'><span aria-hidden='true'>«</span></a ></li>";
let pageBtnNext = "<li class='page-item btnNext'><a class='page-link' aria-label='Next'><span aria-hidden='true'>»</span></a></li>";
let pageTips = "<div style='line-height:38px'>" + PageIndex + " " + "-" + " " + totalPage + " " + "of" + " " + total + " " + "items" + "</div > ";
pageHtml.append(pageBtnPrev); // 添加左按钮
// 第一页
let firstPage = $("<li class='page-item' pagenumber=1><a class='page-link'>1</a ></li> ");
// 最后一页
let lastPage = $("<li class='page-item' pagenumber='" + totalPage + "'><a class='page-link'>" + totalPage + "</a ></li>");
// 左省略号
let leftOmitPage = $("<li class='page-item' id='leftOmit'><a class='page-link'>...</a></li>");
// 右省略号
let rightOmitPage = $("<li class='page-item' id='rightOmit'><a class='page-link'>...</a></li>");
// 左省略号图标
let leftOmitIcon = $("<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-left' viewBox='0 0 16 16'>" +
"<path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
// 右省略号图标
let rightOmitIcon = $("<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-right' viewBox='0 0 16 16'>" +
"<path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
// 总页数小于等于9页全部显示
if (totalPage <= 9) {
for (let i = 1; i <= totalPage; i++) {
pageHtml.append($("<li class='page-item' pagenumber=" + i + "><a class='page-link'>" + i + "</a ></li> "));
}
} else if (PageIndex <= 8) { //总页数大于10且当前页远离总页数
for (let i = 1; i <= 9; i++) {
pageHtml.append($("<li class='page-item' pagenumber=" + i + "><a class='page-link'>" + i + "</a ></li> "));
}
pageHtml.append(rightOmitPage);
pageHtml.append(lastPage);
//总页数大于10且当前页接近总页数
} else if (PageIndex > totalPage - 7) {
pageHtml.append(firstPage);
pageHtml.append(leftOmitPage);
for (let i = totalPage - 8; i <= totalPage; i++) {
pageHtml.append($("<li class='page-item' pagenumber=" + i + "><a class='page-link'>" + i + "</a ></li> "));
}
//除开上面两个情况 当前页在中间
} else {
pageHtml.append(firstPage);
pageHtml.append(leftOmitPage);
for (let i = PageIndex - 3; i <= PageIndex + 3; i++) {
pageHtml.append($("<li class='page-item' pagenumber=" + i + "><a class='page-link'>" + i + "</a ></li> "));
}
pageHtml.append(rightOmitPage);
pageHtml.append(lastPage);
}
$(".pagination li[pagenumber='" + PageIndex + "']").addClass('active');
pageHtml.append(pageBtnNext); // 添加右按钮
pageHtml.append(pageTips); // 添加右下角items提示栏
/* 点击页码按钮进行翻页 */
$(".pagination li[pagenumber]").on('click', function () { // 页数跳转
PageIndex = Number($(this).text()); // 当前页
$('input[name=pagenumber]').attr('value', PageIndex); // 当前第几页
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
pageHtml.empty();
setPages();
})
/* 点击按钮进行翻页 */
$(".btnPrev").on('click', function () { // 向左翻页
if (PageIndex > 1) {
PageIndex--;
pageHtml.empty();
setPages();
}
$(this).addClass('disabled');
})
$(".btnNext").on('click', function () { // 向右翻页
if (PageIndex < totalPage) {
PageIndex++;
pageHtml.empty();
setPages();
}
$(this).addClass('disabled');
})
/* 点击左省略号向左翻页 */
$('#leftOmit').click(function () {
if (PageIndex > 10) {
PageIndex -= 10;
pageHtml.empty();
setPages();
}
})
/* 点击右省略号向右翻页 */
$('#rightOmit').click(function () {
if (PageIndex <= totalPage - 10) {
PageIndex += 10;
pageHtml.empty();
setPages();
}
})
/* 左省略号移入移出 */
$('#leftOmit').mouseenter(function () {
$(this).children().html(leftOmitIcon);
})
$('#leftOmit').mouseleave(function () {
$(this).children().html('...');
})
/* 右省略号移入移出 */
$('#rightOmit').mouseenter(function () {
$(this).children().html(rightOmitIcon);
})
$('#rightOmit').mouseleave(function () {
$(this).children().html('...');
})
}
setPages();
})
</script>
</html>
3、实现效果
jQuery+bootstrap实现有省略号的数据分页的更多相关文章
- 基于Bootstrap的JQuery TreeView树形控件，数据支持json字符串、list集合（MVC5）<二>
上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...
- Jqgrid pager 关于“local” dataType 动态加载数据分页的研究（没好用的研究结果）
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- mysq大数据分页
mysql limit大数据量分页优化方法 Mysql的优化是非常重要的.其他最常用也最需要优化的就是limit.Mysql的limit给分页带来了极大的方便,但数据量一大的时候,limit的性能就急 ...
- Sql Server 数据分页
http://www.cnblogs.com/qqlin/archive/2012/11/01/2745161.html 1.引言 在列表查询时由于数据量非常多,一次性查出来会非常慢,就算一次查出来了 ...
- Oracle、MySql、SQLServer数据分页查询
看过此博文后Oracle.MySql.SQLServer 数据分页查询,在根据公司的RegionRes表格做出了 SQLserver的分页查询语句: 别名.字段 FROM( SELECT row_nu ...
- 知方可补不足~SQL2005使用ROW_NUMBER() OVER()进行数据分页
回到目录 数据分页是这个经常说的东西,无论在WEBForm还是WinForm中它都会被单独拿出来,或者是公用组件,或者是公用类库,反正对于数据分页这个东西,总是我们关注的一个话题,但事实上,数据分页归 ...
- salesforce 零基础开发入门学习（八）数据分页简单制作
本篇介绍通过使用VF自带标签和Apex实现简单的数据翻页功能. 代码上来之前首先简单介绍一下本篇用到的主要知识: 1.ApexPages命名空间 此命名空间下的类用于VF的控制. 主要的类包括但不限于 ...
- Oracle中的数据分页
--数据分页脚本 --创建包含数据分页代码元素声明的包头结构create or replace package data_controlis type type_cursor_data is ref ...
- 数据分页处理系列之三：Neo4j图数据分页处理
首先简单介绍下Neo4j,Neo4j是一个高性能的NOSQL图形数据库,它将结构化数据存储在网络上而不是表中,它是一个嵌入式的.基于磁盘的.具备完全的事务特性的Java持久化引擎,但是它将结构化数 ...
随机推荐
- what the difference betweent pin page and lock page ？
以前在项目中,大家为了避免自己使用的page被换出,使用的方式是mlock,从mlock的实现的看,它限制了page被swap, 然后在一个swap off的系统中,这样其实和mlock调用与否没有关 ...
- 用maven创建ssm框架样版
在pom.xml中添加依赖包 特别要注意导入的"org.springframework"的版本,不兼容会报错 <!--依赖:junit ,数据库驱动,连接池,servlet, ...
- HOSMEL：一种面向中文的可热插拔模块化实体链接工具包
HOSMEL: A Hot-Swappable Modularized Entity Linking Toolkit for Chinese ACL 2022 论文地址:https://aclanth ...
- 第五十一篇：webpack中的loader(二) --less-loader
好家伙 先扩充一下知识点: 什么是.less文件? 作为一名前端开发的同学,很多时候我们都无法避免地要去写大量的 CSS 代码, 而且耗费的时间还不少,所以学习一种能够提升开发效率的 CSS 预处理器 ...
- Helm安装ingress-nginx-4.2.3
Application version 1.3.0 Chart version 4.2.3 获取chart包 helm fetch ingress-nginx/ingress-nginx --vers ...
- C#：winform窗体 实现类似QQ的窗体在桌面边缘停靠和隐藏
设计思路:1.使用定时器(Timer)来监控鼠标位置和窗体位置,并实现窗体的停靠和隐藏2.当鼠标拖动窗体时,窗体才有可能根据自身位置决定是否停靠3.如果窗体四周没有接触到屏幕边缘则不会停靠4.如果窗体 ...
- 如何搭建安全的 CI/CD 管道？
Eolink 前端负责人黎芷君进行了<工程化- CI / CD>的主题演讲,围绕 CI/CD 管道安全的实践,分享自己在搭建 CI/CD 管道过程中所总结的重要经验,与开发者深入讨论 &q ...
- Exchange备份和日志清除
最近新部署Exchange 2019,虽然变化不大,但是也遇到了一些小问题.随着深入研究,就能发现一些以前被忽视的点.Exchange完成备份后,数据库日志并没有被清除,依然存在.https://ww ...
- 动态存储管理实战：GlusterFS
文件转载自:https://www.orchome.com/1284 本节以GlusterFS为例,从定义StorageClass.创建GlusterFS和Heketi服务.用户申请PVC到创建Pod ...
- 示例：Ingress通过互联网访问应用
Ingress Ingress 是 Kubernetes 的一种 API 对象,将集群内部的 Service 通过 HTTP/HTTPS 方式暴露到集群外部,并通过规则定义 HTTP/HTTPS 的路 ...