Home >Web Front-end >JS Tutorial >js paging tool example_javascript skills

js paging tool example_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:17:511249browse

The examples in this article describe the usage of js paging tool. Share it with everyone for your reference. The specific implementation method is as follows:

js code part:

Copy code The code is as follows:
/**
* Pagination 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 = '
    1. '; 
                               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 = '
    2. ' i '
    3. '; 
                                   } else {                                 
                                       nav = '
    4. ' i '
    5. '; 
                                   } 
                               } 
                                
                               nav = '
  • '; 
                             if(currentPage == totalPage){ 
                                 nav = '
  • 后一页
  • '; 
                                 nav ='
  • 尾页'; 
                             } else { 
    nav = '
  • Next page Page
  • ';
    nav ='
  • Last Page';
                                                             nav = '
';
                $("#" divId).html(nav);                                                                 };                               This.Page = Page;
})();


css part:

Copy code The code is as follows:/*Page break style starts*/ .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;
}
/*End of paging style*/


Calling method:

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn