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持久化引擎,但是它将结构化数 ...
随机推荐
- JS的简介
JS式JavaScript的简称,它是一门弱语言,它可以实现让网页动起来 JS的构成 核心(ECMAScript) 文档对象模型(DOM)-- Document Object Module 浏览器对 ...
- SpringBoot Excel导入导出
一.引入pom.xml依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifac ...
- Postman中的断言
Postman设置断言 一.断言的定义 1.什么是断言? 一般一个完整的接口测试,包括:请求->获取响应正文->断言,请求和获取响应正文很常见.断言一般是对请求的响应结果做操作,判断预期结 ...
- Semaphore-停车场
模拟20辆车进停车场 停车场容纳总停车量5. 当一辆车进入停车场后,显示牌的剩余车位数响应的减1. 每有一辆车驶出停车场后,显示牌的剩余车位数响应的加1. 停车场剩余车位不足时,车辆只能在外面等待 p ...
- SpringBoot中maven项目Plugins里resources报红
错误原因:刚开始下载依赖时下载错误导致的 参考:解决idea中maven plugins标红的问题 - 走看看 (zoukankan.com) 如果还不行: 就根据上面提示的地址找到maven的配置包 ...
- 理解C++函数指针和指针函数（一）
函数指针 实际上使用最多的还是指针函数,但我们还是可以先看看函数指针 奇怪的是,大家搜索指针函数,或者Pointer function,出来的还是函数指针的链接. OK,废话不多说,先给大家举个例子. ...
- 记一次 .NET 某金融企业 WPF 程序卡死分析
一:背景 1. 讲故事 前段时间遇到了一个难度比较高的 dump,经过几个小时的探索,终于给找出来了,在这里做一下整理,希望对大家有所帮助,对自己也是一个总结,好了,老规矩,上 WinDBG 说话. ...
- 一 策略模式 来自CBF4LIFE 的设计模式
刘备要到江东娶老婆了,走之前诸葛亮给赵云(伴郎)三个锦囊妙计,说是按天机拆开解决棘手问题,嘿,还别说,真是解决了大问题,搞到后是周瑜陪了夫人又折兵呀,那咱们先看看这个场景是什么样子的. 先说这个场景中 ...
- 02_Linux基础-文件系统层次结构-提示符-进程-命令格式-隐藏文件-通配符-绝对相对路径-{1..100}-ls-mkdir-其他基础命令
02_Linux基础-ls-mkdir-cd-pwd-man-useradd-su-rm-tree-tab-passwd-w-ssh-touch-date-stat-cp-mv-du-文件系统层次结构 ...
- KingbaseES集群管理维护案例之---备库checkpoint分析
数据库异常关闭时,数据库关闭时来不及或者没机会做checkpoint,则需要从上一个一致性检查的开始恢复.KingbaseES备机checkpoint是不能产生checkpoint WAL日志条目 ...