JS实现动态分页码(源码分享)
时间:2018-10-11
本文章向大家介绍JS实现动态分页码(源码分享),需要的朋友可以参考一下
思路分析:有3种情况
第一种情况,当前页面curPage < 4
第二种情况,当前页面curPage == 4
第三种情况,当前页面curPage>4
此外,还要考虑,当前页码 curPage < pageTotal(总页码)-2,才显示 ...
首先,先是前端的布局样式
<body> /*首先,在body中添加div id="pagination" */ <div id="pagination">
<!-- 后面会在JS中动态追加 ,此处为了,实现前端效果,所以注册
<a class="banBtn pageItem" id="prevBtn"><</a>
<a class="active pageItem" id="first">1</a>
<a href="#" class="pageItem">2</a>
<a href="#" class="pageItem">3</a>
<a href="#" class="pageItem">4</a>
<span class="over">...</span>
<a href="#" class="pageItem" id="last">10</a>
<a href="#" class="pageItem" id="nextBtn">></a>
-->
</div> </body>
其次,是css代码
*{ margin: 0; padding: 0; } #pagination{ width: 500px; height: 100px; border: 2px solid crimson; margin: 50px auto ; padding-top: 50px ; padding-left: 50px; } .over,.pageItem{ float: left; display: block; width: 35px; height: 35px; line-height: 35px; text-align: center; } .pageItem{ border: 1px solid orangered; text-decoration: none; color: dimgrey; margin-right: -1px;/*解决边框加粗问题*/ } .pageItem:hover{ background-color: #f98e4594; color:orangered ; } .clearfix{ clear: both; } .active{ background-color: #f98e4594; color:orangered ; } .banBtn{ border:1px solid #ff980069; color: #ff980069; } #prevBtn{ margin-right: 10px; } #nextBtn{ margin-left: 10px; }
JavaScript代码
<script type="text/javascript"> var pageOptions = {pageTotal:10,curPage:7,paginationId:''}; dynamicPagingFunc(pageOptions); function dynamicPagingFunc(pageOptions){ var pageTotal = pageOptions.pageTotal || 1; var curPage = pageOptions.curPage||1; var doc = document; var paginationId = doc.getElementById(''+pageOptions.paginationId+'') || doc.getElementById('pagination'); var html = ''; if(curPage>pageTotal){ curPage =1; } /*总页数小于5,全部显示*/ if(pageTotal<=5){ html = appendItem(pageTotal,curPage,html); paginationId.innerHTML = html; } /*总页数大于5时,要分析当前页*/ if(pageTotal>5){ if(curPage<=4){ html = appendItem(pageTotal,curPage,html); paginationId.innerHTML = html; }else if(curPage>4){ html = appendItem(pageTotal,curPage,html); paginationId.innerHTML = html; } } } function appendItem(pageTotal,curPage,html){ var starPage = 0; var endPage = 0; html+='<a class="pageItem" id="prevBtn"><</a>'; if(pageTotal<=5){ starPage = 1; endPage = pageTotal; }else if(pageTotal>5 && curPage<=4){ starPage = 1; endPage = 4; if(curPage==4){ endPage = 5; } }else{ if(pageTotal==curPage){ starPage = curPage-3; endPage = curPage; }else{ starPage = curPage-2; endPage = curPage+1; } html += '<a class="pageItem" id="first">1</a><span class="over">...</span>'; } for(let i = starPage;i <= endPage;i++){ if(i==curPage){ html += '<a class="active pageItem" id="first">'+i+'</a>'; }else{ html += '<a href="#" class="pageItem">'+i+'</a>'; } } if(pageTotal<=5){ html+='<a href="#" class="pageItem" id="nextBtn">></a>'; }else{ if(curPage<pageTotal-2){ html += '<span class="over">...</span>'; } if(curPage<=pageTotal-2){ html += '<a href="#" class="pageItem">'+pageTotal+'</a>'; } html+='<a href="#" class="pageItem" id="nextBtn">></a>'; } return html; } </script>
- 在网页中给Flash加上超级链接
- ASP.NET MVC HandleErrorAttribute 和 远程链接
- javascript实现数字转大写金额的函数
- 如何在GridView的Footer内显示总计?
- 自定义WCF的配置文件
- Centos中动态扩容lvm逻辑卷的操作记录
- Visual Round Trip Analyzer
- ASP.NET可以在Windows Server 2008 R2 Server Core上运行
- SOA十大设计原则
- 中国人民大学文继荣:大数据的经验主义解释
- 检查Python对象
- 分布式监控系统Zabbix-3.0.3-完整安装记录(6)-微信报警部署
- Android 命名规范 (提高代码可以读性)
- Msdn 杂志 asp.net ajax 文章汇集
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python字符串
- 初识 HBase
- Number对象
- Windows 技术篇-设置计划任务,每天自动关机
- Mycat 快速入门
- Python 技术篇-连接qq邮箱服务器,调用qq邮箱发送邮件实战演示,qq邮箱授权码开通方法
- 浅谈数据库集群方案
- SkyWalking - 实现微服务监控告警
- Actuator + Prometheus + Grafana搭建微服务监控平台
- Python 用smtplib库发邮件报错:[WinError 10061] 由于目标计算机积极拒绝,无法连接。解决办法
- python运算符
- Windows 技术篇-禁用windows更新服务,解决windows无法关闭更新问题,解决windows自己启用更新问题。
- 搭建 SkyWalking 服务(For ElasticSearch 7)
- 基于 SkyWalking 实现服务链路追踪
- Python 技巧篇-字符串灵活处理:字符串过滤、字符串拼接,字符串切片,特殊、超长字符串的处理实例演示