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持久化引擎,但是它将结构化数 ...
随机推荐
- Linus命令
参考: https://blog.csdn.net/weixin_44191814/article/details/120091363 vim编辑器 ## Vim基本模式 [对文件进行操作]vim 文 ...
- Mac根据端口找进程id
lsof -i:20942 以后认真的学习一下这个命令
- 如何使用U盘重装Windows7系统？
一.重装步骤 第一步 将U盘制作为启动盘. 备注:推荐使用比较纯净的制作工具,如开源工具Rufus制作USB启动盘. 第二步 进入BIOS界面,选择U盘启动. 备注:不同的电脑进入BIOS界面的方式不 ...
- 一个包搞定中文数据集: datasetstore
工作中,总是要使用各种中文数据集,每次使用数据集都要花费不少的时间进行寻找,写预处理代码,结合不同的模型和框架做出相应的处理.有的时候好不容易找到合适的数据集,但是却因为网络问题,无法下载,下载了很长 ...
- 自定义View5 -塔防小游戏：第二篇防御塔随意放置
第一篇:一个防御塔+多个野怪(简易版) 第二篇:防御塔随意放置 自定义View,处理事件分发,up,move,down. 第三篇:防御塔随意放置+多组野怪 第四篇:多波野怪 第五篇:杀死野怪获得金币 ...
- JS输出内容为[object Object]
问题描述 项目中,欲在控制台输出变量res(自定义对象)查看数据,代码为: console.log('res:' + res); 但控制台显示结果为res: [object Object],并非想要查 ...
- 聊聊两个Go即将过时的GC优化策略
转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com 这篇文章本来是要讲 Go Memory Ballast 以及 Go GC Tuner 来 ...
- day01-项目开发流程
多用户即时通讯系统01 1.项目开发流程 2.需求分析 用户登录 拉取在线用户列表 无异常退出(包括客户端和服务端) 私聊 群聊 发文件 服务器推送新闻/广播 3.设计阶段 3.1界面设计 用户登录: ...
- 管理数据库的神器：DBeaver
转载自:https://mp.weixin.qq.com/s/oqEAZNk-TorqRUocav27Ew GitHub地址:https://github.com/dbeaver/dbeaver 软件 ...
- Kibana： 运用Data Visualizer来分析CSV数据