本文实例讲述了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 = ''; 
                   nav += '总记录数：' + totalrecord +''; 
                   nav += '总页数：' + totalpage + ''; 
                   nav += '当前页：' + currentpage + ''; 
                   if(currentpage == 1){ 
                       nav += '首页'; 
                       nav += '前一页'; 
                   } else {                     
                       nav += '首页'; 
                       nav += '前一页'; 
                   } 
                   nav += ''; 
                         var start = currentpage - math.floor(showpage/2); 
                         var end = currentpage + math.floor(showpage/2);
                         if(end > totalpage){ 
                             start -= (end - totalpage); 
                         }
if(start                              start = 1;  
                         } 
                         if(currentpage                             end = showpage;   
                         }
if(end > totalpage){ 
                             end = totalpage; 
                         } 
                         for(var i = start; i                              if(i == currentpage){ 
                                 nav += '' + i + ''; 
                             } else {                                 
                                 nav += '' + i + ''; 
                             } 
                         }
nav += ''; 
                         if(currentpage == totalpage){ 
                             nav += '后一页'; 
                             nav +='尾页'; 
                         } else { 
                             nav += '后一页'; 
                             nav +='尾页'; 
                         } 
                         nav += '';     
            $(# + 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);
希望本文所述对大家的javascript程序设计有所帮助。