JS实现带省略号的长分页显示
2024-09-02 18:46:42
// 刷新|生成分页信息
function refreshPageInfo(data, pageIndex) {
var pageSize = data.pageCount
pagingInfo.html('')
var li = $('<li><a data="1">«</a></li>')
pagingInfo.append(li) // 总页数小于等于10页,全部显示
if (pageSize <= 10) {
for (var i = 1; i <= pageSize; i++) {
var li = $('<li><a data="' + i + '">' + i + '</a></li>')
addActive(li, i, pageIndex)
pagingInfo.append(li)
}
// 当前页是前10页
} else if (pageIndex < 10) {
for (var i = 1; i <= 10; i++) {
var li = $('<li><a data="' + i + '">' + i + '</a></li>')
addActive(li, i, pageIndex)
pagingInfo.append(li)
}
pagingInfo.append('<li><a>......</a></li>')
pagingInfo.append('<li><a data=' + pageSize + '>' + pageSize + '</a></li>')
// 当前页面是最后10页
} else if (pageSize - pageIndex < 10) {
if (pageSize - 10 > 1) {
pagingInfo.append('<li><a data="1">1</a></li>')
pagingInfo.append('<li><a>......</a></li>')
}
for (var i = pageSize - 10; i <= pageSize; i++) {
var li = $('<li><a data="' + i + '">' + i + '</a></li>')
addActive(li, i, pageIndex)
pagingInfo.append(li)
if (i == 1) {
pagingInfo.append('<li><a>......</a></li>')
}
}
} else {
// 当前页面基于所有页面中间位置
// 初始化页面基准坐标
if (tmpPageIndex == 0) {
tmpPageIndex = pageIndex
}
// 当页面索引达到最前或最后时,需要重新设置页面基准坐标
if (tmpPageIndex <= pageIndex - 5 || tmpPageIndex >= pageIndex + 5) {
tmpPageIndex = pageIndex
}
pagingInfo.append('<li><a data="1">1</a></li>')
pagingInfo.append('<li><a>......</a></li>') for (var i = tmpPageIndex - 5; i <= tmpPageIndex + 5; i++) {
var li = $('<li><a data="' + i + '">' + i + '</a></li>')
addActive(li, i, pageIndex)
pagingInfo.append(li)
} pagingInfo.append('<li><a>......</a></li>')
pagingInfo.append('<li><a data=' + pageSize + '>' + pageSize + '</a></li>')
} var li = $('<li><a data="' + data.pageCount + '">»</a></li>')
pagingInfo.append(li)
} // 添加分页按钮焦点
function addActive(li, i, pageIndex) {
if (i == pageIndex) {
li.addClass('active')
}
}
效果:
最新文章
- Centos 6.5 搭建l2tp 服务端和客户端
- init.php 建立自己的前端共享文件
- JavaScrip入门(3)
- So... what&#39;s up?
- jQuery EasyUI API 中文文档
- BestCoder12 1001.So easy(hdu 5058) 解题报告
- cocos2d-x 知识小结(1)zorder和tag
- ADO,OLEDB,ODBC,DAO的区别
- convert app to 64-bit for ios7
- 转 sort按照数据大小排序
- C# TreeGridView 实现进程列表
- ABP文档笔记 - 配置、设置、版本、功能、权限
- spring事务机制
- relief中visio图出现问题处理
- sql语句基础
- Mac 下 Eclipse 添加 Dynamic Web Project 并配置 Tomcat
- Android 插件化和热修复知识梳理
- Java的家庭记账本程序(A)
- 学习 MeteoInfo二次开发教程(四)
- class path and classloader
热门文章
- mysql:启动服务时遇到的问题
- Tomcat多实例集群架构 安全优化和性能优化
- IDEA类和方法注释模板设置(非常详细)
- VS2019 + Qt5.13 配置
- AP注册
- Leetcode之70. Climbing Stairs Easy
- 机器学习笔记——模型调参利器 GridSearchCV(网格搜索)参数的说明
- SpringCloud学习(六)分布式配置中心(Spring Cloud Config)(Finchley版本)
- python下对目录&;文件的操作
- Linux 安装 openoffice