js-Paging-Tool Beispiel_Javascript-Kenntnisse

Die Beispiele in diesem Artikel beschreiben die Verwendung des js-Paging-Tools. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

js-Codeteil:

Code kopieren Der Code lautet wie folgt:

/**
* Paginierung js
​*/ 
var Seite; 
 
(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 = '
• '; 
                           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 = '
  1. ' i '
  '; 
                               } else {                                 
                                   nav = '
  2. ' i '
  '; 
                               } 
                           } 
                            
                           nav = '
'; 
                         if(currentPage == totalPage){ 
                             nav = '
• 后一页
'; 
                             nav ='
• 尾页'; 
                           } else { 
  nav = '
'; nav ='
• Letzte Seite';                                                       nav = '

';                 $("#" divId).html(nav);                                                             };                               This.Page = Seite;
})();



CSS-Teil:

Code kopieren

Der Code lautet wie folgt:/*Seitenumbruchstil beginnt*/ .pagination{ Überlauf: versteckt; Rand:0 0 0 25px; Polsterung: 10px 10px 6px 150px; border-top:1px solid #c8c8c8; _zoom:1; Textausrichtung: Mitte;

}

.pagination *{
display:inline;
float:left;
Rand:0;
Polsterung:0;
Schriftgröße: 12px;
}
.pagination i{
float:none;
padding-right:1px;
}
.currentPage b{
float:none;
Farbe:#f00;
}
.pagination li{
Listenstil:none;
Rand:0 5px; }
.pagination li li{
Position:relativ;
margin:-2px 0 0; Schriftfamilie: Arial, Helvetica, serifenlos
}
.firstPage a,. previousPage a,.nextPage a,.lastPage a{
Überlauf: versteckt;
Höhe:0;
text-indent:-9999em;
border-top:8px solide #fff; border-bottom:8px solid #fff; }
.pagination li li a{
Rand:0 1px; padding:0 4px; border:3px double #fff; border-color:#eee;
Hintergrund:#eee;
Farbe:#06f;
Textdekoration: keine;
}
.pagination li li a:hover{
Hintergrund:#f60;
Rahmenfarbe:#fff;
Rahmenfarbe:#f60;
Farbe:#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:relativ;
Rand: -1px 3px; Polsterung: 1px 4px; border:3px double #fff; Rahmenfarbe:#f60;
Hintergrund:#f60;
Farbe:#fff;
}
.pagination li.currentState,.currentState a,.currentState a:hover{
border-color:#fff #ccc
Cursor:Standard;
}
/*Ende des Paging-Stils*/



Aufrufmethode:






Code kopieren


Der Code lautet wie folgt:

Page.navigation("pageNav", 100, 10, 1, "xxxList");

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.