欢迎来到站长教程网!

JavaScript

当前位置:主页 > 网页制作 > JavaScript >

JS实现前端动态分页码代码实例

时间:2020-06-03|栏目:JavaScript|点击:

思路分析:有3种情况

第一种情况,当前页面curPage < 4

第二种情况,当前页面curPage == 4

第三种情况,当前页面curPage>4

此外,还要考虑,当前页码 curPage < pageTotal(总页码)-2,才显示 ...

首先,先是前端的布局样式

<body> /*首先,在body中添加div */ <div> <!-- 后面会在JS中动态追加 ,此处为了,实现前端效果,所以注册 <a><</a> <a>1</a> <a href="#" >2</a> <a href="#" >3</a> <a href="#" >4</a> <span>...</span> <a href="#">10</a> <a href="#">></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>&lt;</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>1</a><span>...</span>'; } for(let i = starPage;i <= endPage;i++){ if(i==curPage){ html += '<a>'+i+'</a>'; }else{ html += '<a href="#" >'+i+'</a>'; } } if(pageTotal<=5){ html+='<a href="#">&gt;</a>'; }else{ if(curPage<pageTotal-2){ html += '<span>...</span>'; } if(curPage<=pageTotal-2){ html += '<a href="#" >'+pageTotal+'</a>'; } html+='<a href="#">&gt;</a>'; } return html; } </script>

上一篇:jQuery+Ajax+js实现请求json格式数据并渲染到html页面

栏    目:JavaScript

下一篇:在Vue中创建可重用的 Transition的方法

本文标题:JS实现前端动态分页码代码实例

本文地址:http://www.blue1000.com/wangyezhizuo/JavaScript/1523.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:1961407250 | 邮箱:1961407250#qq.com(#换成@)

Copyright © 2002-2022 BK网络学院版权所有 Power by DedeCms 粤ICP备19027147号-7