本文實例講述了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 = ''; 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 = '' 我'' ; } 和其他 } } 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程式設計有所幫助。