js分页工具

来源：互联网发布：中甲联赛数据统计编辑：程序博客网时间：2024/06/05 07:34

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");

0 0