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=" auto;display:inline-block !important;height: auto;">
</div>

这是实现js控制页码显示的所有步骤，可能有点麻烦，后续会继续优化，当然现在网上也有很多分页插件，全凭个人喜好。

至于 “首页，上一页，下一页，末页，以及跳转页，这些就看各自的需求实现了（我是用el表达式控制的）”

希望可以帮到有需要的童鞋。。。

转载请标明出处！！