这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 js 实现前端分页页码管理的具体方法。具有一定的参考价值,下面跟着小编一起来看下吧
用 JS 实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评!
首先先看效果图:
这是初始页面(也就是第一页)的界面,如果为第一页时,则首页和上一页按钮不可用,为了展示分页的效果,我当前的分页是一条一页。
这是页码大于 5 页时展示的效果:1,2 页始终始终显示(考虑到用户体验)
这是最后一页的效果图:
下面直接上 js 代码:
- //页码显示
- $(function(){
- var dqPage = $("#dqPage").text();//得到当前页数
- dqPage = parseInt(dqPage);//得到的文本转成int
- var pageCount = $("#pageCount").text();//得到总页数
- pageCount = parseInt(pageCount);
- var i = 1;
- i = parseInt(i);
- var item="";
- var href = "这里是请求地址";
- if (pageCount <= 5 ) {//总页数小于五页,则加载所有页
- for (i; i <= pageCount; i++) {
- if (i == dqPage) {
- item += "<span class='disabled'>"+i+"</span>";
- }else{
- item += "<a href='"+href+i+"' >"+i+"</a>";
- }
- };
- $('#pageBtn').append(item);
- return;
- }else if (pageCount > 5) {//总页数大于五页,则加载五页
- if (dqPage < 5) {//当前页小于5,加载1-5页
- for (i; i <= 5; i++) {
- if (i == dqPage) {
- item += "<span class='disabled'>"+i+"</span>";
- }else{
- item += "<a href='"+href+i+"' >"+i+"</a>";
- }
- };
- if (dqPage <= pageCount-2) {//最后一页追加"..."代表省略的页
- item += "<span> . . . </span>";
- }
- $('#pageBtn').append(item);
- return;
- }else if (dqPage >= 5) {//当前页大于5页
- for (i; i <= 2; i++) {//1,2页码始终显示
- item += "<a href='"+href+i+"' >"+i+"</a>";
- }
- item += "<span> . . . </span>";//2页码后面用...代替部分未显示的页码
- if (dqPage+1 == pageCount) {//当前页+1等于总页码
- for(i = dqPage-1; i <= pageCount; i++){//"..."后面跟三个页码当前页居中显示
- if (i == dqPage) {
- item += "<span class='disabled'>"+i+"</span>";
- }else{
- item += "<a href='"+href+i+"' >"+i+"</a>";
- }
- }
- }else if (dqPage == pageCount) {//当前页数等于总页数则是最后一页页码显示在最后
- for(i = dqPage-2; i <= pageCount; i++){//...后面跟三个页码当前页居中显示
- if (i == dqPage) {
- item += "<span class='disabled'>"+i+"</span>";
- }else{
- item += "<a href='"+href+i+"' >"+i+"</a>";
- }
- }
- }else{//当前页小于总页数,则最后一页后面跟...
- for(i = dqPage-1; i <= dqPage+1; i++){//dqPage+1页后面...
- if (i == dqPage) {
- item += "<span class='disabled'>"+i+"</span>";
- }else{
- item += "<a href='"+href+i+"' >"+i+"</a>";
- }
- }
- item += "<span> . . . </span>";
- }
- $('#pageBtn').append(item);
- return;
- }
- }
- });
- <%-- 得到当前页--%>
- <span id="dqPage" hidden="hidden" class="disabled1 current">
- ${page}
- </span>
- <%-- js控制的页码显示在这个div中--%>
- <div id="pageBtn" style="width: auto;display:inline-block !important;height: auto;">
- </div>
这是实现 js 控制页码显示的所有步骤,可能有点麻烦,后续会继续优化,当然现在网上也有很多分页插件,全凭个人喜好。
至于 "首页,上一页,下一页,末页,以及跳转页,这些就看各自的需求实现了(我是用 el 表达式控制的)"
来源: http://www.phperz.com/article/17/0703/328818.html