首頁 >web前端 >js教程 >js分頁工具實例_javascript技巧

js分頁工具實例_javascript技巧

WBOY
WBOY原創
2016-05-16 16:17:511251瀏覽

本文實例講述了js分頁工具的用法。分享給大家供大家參考。具體實作方法如下:

js程式碼部分:

複製程式碼 程式碼如下:
/** 
 * 分頁js 
 */ 
var 頁; 
 
(函數(){ 
        var Page = {版本:"1.0",作者:"liuxingmi"}; 
        var 顯示頁 = 9; 
        Page.navigation = 函數(divId、totalRecord、totalPage、currentPage、func){ 
            var nav = '
    '; 
                       nav = '
  • 總記錄數:' TotalRecord '
  • '; 
                       nav = '
  • 總頁數:' TotalPage '
  • '; 
                       nav = '
  • 目前頁:' currentPage '
  • '; 
                       if(目前頁 == 1){ 
                                                       的firstPage currentState"> title=" nav = '
  • 前一頁
  • ' ; 
                       } 其他 {                  nav = '
  • 首頁
  • '; 
    nav = '
  • 前一頁 a>
  • '; 
                       } 
                       nav = '
    1. '; 
                               var start = currentPage - Math.floor(showPage/2); 
                               var end = currentPage Math.floor(showPage/2);
                               if(結束 > 總頁數){ 
                                   開始 -= (結束 - 總頁數); 
                               } 
                                
                               if(開始                              開始=1;  
                               } 
                               if(currentPage                            結束=顯示頁;   
                               } 
                                
                               if(結束 > 總頁數){ 
                                  結束=總頁數; 
                               } 
                               for(var i = 開始; i                              if(i == 在目前頁面){ 
      nav = '
    2. ' 我'
    3. ' ; 
                                   } 和其他 
                                                                     } 
                               } 
                                
                               nav = '
  • '; 
                             if(目前頁 == 總頁){ 
    nav = '
  • 後一頁
  • ' ; 
    nav ='
  • 尾頁'; 
                             } 和其他 { 
    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程式設計有所幫助。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn