分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

JS实现带省略号的长分页显示

发布时间:2023-09-06 02:33责任编辑:林大明关键词:暂无标签
 ???// 刷新|生成分页信息 ????function refreshPageInfo(data, pageIndex) { ???????var pageSize = data.pageCount ???????pagingInfo.html(‘‘) ???????var li = $(‘<li><a data="1">&laquo;</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 + ‘">&raquo;</a></li>‘) ???????pagingInfo.append(li) ???} ???// 添加分页按钮焦点 ???function addActive(li, i, pageIndex) { ???????if (i == pageIndex) { ???????????li.addClass(‘active‘) ???????} ???}

效果:

JS实现带省略号的长分页显示

原文地址:https://www.cnblogs.com/zincredible/p/10390162.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved