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 +'';
nav += '<li class="totalPage">总页数：<i id="totalPage">' + totalPage + '';
nav += '<li class="currentPage">当前页：<b id="pageNum">' + currentPage + '';
if(currentPage == 1){
nav += '<li class="firstPage currentState"><a href="javascript:void(0);" id="firstPage" title="首页">首页';
nav += '<li class="previousPage currentState"><a href="javascript:void(0);" id="frontPage" title="前一页">前一页';
} else {
nav += '<li class="firstPage"><a href="javascript:' + func + '(1);" id="firstPage" title="首页">首页';
nav += '<li class="previousPage"><a href="javascript:' + func + '('+ (currentPage -1) +');" id="frontPage" title="前一页">前一页';
}
nav += '<li id="num">

';
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 + '';
} else {
nav += '

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

nav += '

';
if(currentPage == totalPage){
nav += '<li class="nextPage currentState"><a href="javascript:void(0);" id="nextPage" title="后一页">后一页';
nav +='<li class="lastPage currentState"><a href="javascript:void(0);" id="lastPage" title="尾页">尾页';
} else {
nav += '<li class="nextPage"><a href="javascript:' + func + '('+ (currentPage + 1) +');" id="nextPage" title="后一页">后一页';
nav +='<li class="lastPage"><a href="javascript:' + func + '(' + totalPage + ');" id="lastPage" title="尾页">尾页';
}
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; } /*分页样式结束*/

调用方法：

代码如下:

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