DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js分頁工具實例教程
js分頁工具實例教程
編輯:關於JavaScript     

本文實例講述了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 +'</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");

<div id="pageNav"></div>

希望本文所述對大家的javascript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved