outil de pagination js example_javascript compétences

Les exemples de cet article décrivent l'utilisation de l'outil de pagination js. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

partie du code js :

Copier le code Le code est le suivant :

/**
* Pagination js
​*/ 
varPage ; 
 
(fonction(){ 
        var Page = {version :"1.0",auteur :"liuxingmi"} ; 
        var showPage = 9; 
        Page.navigation = function(divId, totalRecord, totalPage, currentPage, func){ 
            var nav = '

'; 
                   nav = '
• 总记录数：' totalRecord '
'; 
                   nav = '
• 总页数：' totalPage '
'; 
                   nav = '
• 当前页：' page actuelle '
'; 
                   if(currentPage == 1){ 
                       nav = '
• 首页
'; 
                       nav = '
• 前一页
'; 
                   } else {                     
                       nav = '
• 首页
'; 
                       nav = '
• 前一页
'; 
                   } 
                   nav = '
• '; 
                           var start = currentPage - Math.floor(showPage/2); 
                           var end = currentPage Math.floor(showPage/2);
                           if(fin > totalPage){ 
                               début -= (fin - totalPage); 
                           } 
                            
                           if(start <= 0){ 
                               début = 1 ;  
                           } 
                           if(currentPage < showPage && end < showPage){ 
                              fin = showPage;   
                           } 
                            
                           if(fin > totalPage){ 
                               fin = page totale ; 
                           } 
                           for(var i = début; i <= fin; i ){ 
                               if(i == currentPage){ 
                                   nav = '
  1. ' je '≪/a>≪/li>'; 
                                  } else {                                 
                                      nav = '
  2. ' je '≪/a>≪/li>'; 
                                  } 
                              } 
                               
                              nav = '
'; 
                         if(currentPage == totalPage){ 
                             nav = '
• 后一页
'; 
                             nav ='
• 尾页'; 
                           } autre { 
  nav = '
• Page suivante Page< ;/a>
'
nav ='
• Dernière page';
                                                           nav = '

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

partie css :

Copier le code Le code est le suivant :/*Le style de saut de page commence*/ .pagination{

débordement : caché ;

marge :0 0 0 25px ;
remplissage : 10px 10px 6px 150px
bordure supérieure : 1px solide #c8c8c8 ; _zoom:1;
aligner le texte : centre ;
}
.pagination *{
display:inline;
flotter:gauche
marge : 0 ;
remplissage : 0 ;
taille de police : 12px ;
}
.pagination je{
float:aucun;
padding-right:1px;
}
.currentPage b{
float:aucun;
couleur :#f00 ;
}
.pagination li{
style de liste : aucun ;
marge :0 5px ;
}
.pagination li li{
position : relative ;
marge :-2px 0 0 ;
famille de polices : Arial, Helvetica, sans-serif
}
.firstPage a,.previousPage a,.nextPage a,.lastPage a{
débordement : caché ;
hauteur:0;
retrait de texte : -9999em ;
border-top:8px solide #fff;
border-bottom:8px solide #fff
}
.pagination li li a{
marge :0 1px ;
remplissage :0 4px ;
bordure : 3px double #fff ;
couleur de la bordure : #eee ;
arrière-plan :#eee ;
couleur : #06f ; décoration de texte : aucune ;
}
.pagination li li a:hover{
arrière-plan :#f60 ;
couleur de la bordure :#fff;
couleur de la bordure :#f60 ;
couleur :#fff;
}
li.firstPage{
marge gauche : 40px ;
bordure gauche : 3px solide #06f ; }
.firstPage a,.previousPage a{
bordure droite : 12px solide #06f
}
.firstPage a:hover,.previousPage a:hover{
couleur de la bordure droite : #f60 ;
}
.nextPage a,.lastPage a{
bordure gauche : 12px solide #06f
}
.nextPage a:hover,.lastPage a:hover{
bordure-gauche-couleur :#f60 ;
}
.pagination li.lastPage{
bordure droite : 3px solide #06f ; }
.pagination li li.currentState a{
position : relative ;
marge : -1px 3px ;
remplissage : 1px 4px ;
bordure : 3px double #fff ;
couleur de la bordure :#f60 ;
arrière-plan :#f60 ;
couleur :#fff;
}
.pagination li.currentState,.currentState a,.currentState a:hover{
couleur de la bordure :#fff #ccc;
curseur : par défaut ;
}
/*Fin du style de pagination*/



Méthode d'appel :

Copier le code

Le code est le suivant :

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

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.