js分页工具实例

本文实例讲述了js分页工具的用法。分享给大家供大家参考。具体实现方法如下：

js代码部分：

/**  

 * 分页js  

 */  

var Page;  

  

(function(){  

        var Page = {version:"1.0",author:"liuxingmi"};  

        var showPage = 9;  

        Page.navigation = function(divId, totalRecord, totalPage, currentPage, func){  

            var nav = '<ul class=\"pagination\" title=\"分页列表\">';  

                   nav += '<li class="totalAnnal">总记录数：<i id="totalRecord">' + totalRecord +'</i></li>';  

                   nav += '<li class="totalPage">总页数：<i id="totalPage">' + totalPage + '</i></li>';  

                   nav += '<li class="currentPage">当前页：<b id="pageNum">' + currentPage + '</b></li>';  

                   if(currentPage == 1){  

                       nav += '<li class="firstPage currentState"><a href="javascript:void(0);" id="firstPage" title="首页">首页</a></li>';  

                       nav += '<li class="previousPage currentState"><a href="javascript:void(0);" id="frontPage" title="前一页">前一页</a></li>';  

                   } else {                      

                       nav += '<li class="firstPage"><a href="javascript:' + func + '(1);" id="firstPage" title="首页">首页</a></li>';  

                       nav += '<li class="previousPage"><a href="javascript:' + func + '('+ (currentPage -1) +');" id="frontPage" title="前一页">前一页</a></li>';  

                   }  

                   nav += '<li id="num"><ol>';  

                         var start = currentPage - Math.floor(showPage/2);  

                         var end = currentPage + Math.floor(showPage/2);

                         if(end > totalPage){  

                             start -= (end - totalPage);  

                         }  

                           

                         if(start <= 0){  

                             start = 1;   

                         }  

                         if(currentPage < showPage && end < showPage){  

                            end = showPage;    

                         }  

                           

                         if(end > totalPage){  

                             end = totalPage;  

                         }  

                         for(var i = start; i <= end; i++){  

                             if(i == currentPage){  

                                 nav += '<li class="currentState"><a title="转到第1页" href="javascript:' + func + '(' + i + ');">' + i + '</a></li>';  

                             } else {                                  

                                 nav += '<li><a title="转到第1页" href="javascript:' + func + '(' + i + ');">' + i + '</a></li>';  

                             }  

                         }  

                           

                         nav += '</ol></li>';  

                         if(currentPage == totalPage){  

                             nav += '<li class="nextPage currentState"><a href="javascript:void(0);" id="nextPage" title="后一页">后一页</a></li>';  

                             nav +='<li class="lastPage currentState"><a href="javascript:void(0);" id="lastPage" title="尾页">尾页</a></i>';  

                         } else {  

                             nav += '<li class="nextPage"><a href="javascript:' + func + '('+ (currentPage + 1) +');" id="nextPage" title="后一页">后一页</a></li>';  

                             nav +='<li class="lastPage"><a href="javascript:' + func + '(' + totalPage + ');" id="lastPage" title="尾页">尾页</a></i>';  

                         }  

                         nav += '</ul>';      

            $("#" + divId).html(nav);             

        };  

       this.Page = Page;  

})();

css部分：

/*分页样式开始*/  

.pagination{  

 overflow:hidden;  

 margin:0 0 0 25px;  

 padding:10px 10px 6px 150px;  

 border-top:1px solid #c8c8c8;  

 _zoom:1;  

 text-align: center;  

}  

.pagination *{  

 display:inline;  

 float:left;  

 margin:0;  

 padding:0;  

 font-size:12px;  

}  

.pagination i{  

 float:none;  

 padding-right:1px;  

}  

.currentPage b{  

 float:none;  

 color:#f00;  

}  

.pagination li{  

 list-style:none;  

 margin:0 5px;  

}  

.pagination li li{  

 position:relative;  

 margin:-2px 0 0;  

 font-family: Arial, Helvetica, sans-serif  

}  

.firstPage a,.previousPage a,.nextPage a,.lastPage a{  

 overflow:hidden;  

 height:0;  

 text-indent:-9999em;  

 border-top:8px solid #fff;  

 border-bottom:8px solid #fff;  

}  

.pagination li li a{  

 margin:0 1px;  

 padding:0 4px;  

 border:3px double #fff;  

 +border-color:#eee;  

 background:#eee;  

 color:#06f;  

 text-decoration:none;  

}  

.pagination li li a:hover{  

 background:#f60;  

 border-color:#fff;  

 +border-color:#f60;  

 color:#fff;  

}  

li.firstPage{  

 margin-left:40px;  

 border-left:3px solid #06f;  

}  

.firstPage a,.previousPage a{  

 border-right:12px solid #06f;  

}  

.firstPage a:hover,.previousPage a:hover{  

 border-right-color: #f60;  

}  

.nextPage a,.lastPage a{  

 border-left:12px solid #06f;  

}  

.nextPage a:hover,.lastPage a:hover{  

 border-left-color:#f60;  

}  

.pagination li.lastPage{  

 border-right:3px solid #06f;  

}  

.pagination li li.currentState a{  

 position:relative;  

 margin:-1px 3px;  

 padding:1px 4px;  

 border:3px double #fff;  

 +border-color:#f60;  

 background:#f60;  

 color:#fff;  

}  

.pagination li.currentState,.currentState a,.currentState a:hover{  

 border-color:#fff #ccc;  

 cursor:default;  

}  

/*分页样式结束*/

调用方法：

Page.navigation("pageNav", 100, 10,  1, "xxxList");
<div id="pageNav"></div>

希望本文所述对大家的javascript程序设计有所帮助。