l'effet de pagination dynamique jquery est comparable à Time.com_jquery

J'ai récemment étudié l'effet de pagination de jquery. Je viens d'en créer un et je l'ai partagé avec tout le monde. L'effet de pagination est similaire à celui de Mtime.com.

Placez d'abord un

sur la page aspx. Ceci est utilisé pour stocker la pagination.

Créez ensuite un fichier page.js. Le code spécifique est le suivant (les classes CSS utilisées dans js sont définies par vous-même, elles ne sont donc pas données ici. Pour des détails spécifiques, vous pouvez définir vous-même le style CSS) :

Copier le code Le code est le suivant :

$(document).ready(function(){
var pageCount=0;//Nombre total de pages, défini dans la fonction traitement des données

////////////////////////Le bouton droit affiche la pagination
fonction droite(pageCount,limit,rlimit){
var html="";
if(parseInt(pageCount)-limit>=rlimit){
for(var i=parseInt(pageCount)-rlimit 1; i<=parseInt(pageCount); i ){
html ="" i "";}
>
autre{
for(var i=parseInt(limit) 1; i<=pageCount; i ){
html ="" i "";}
>
renvoyer le HTML ;
}
///////////////////////////Page d'accueil, dernière page, page précédente, page suivante
fonction changeState(pageIndex,pageCount){
var $button1=$("div.pageDivs").find("#Button1");//Page précédente
var $button2=$("div.pageDivs").find("#Button2");//Page suivante
var $first=$("div.pageDivs").find("#First");//Page d'accueil
var $last=$("div.pageDivs").find("#Last");//Dernière page
if(parseInt(pageIndex)==1){
$first.css("display","aucun");
$button1.css("display","aucun");}
autre{
$first.css("display","inline");
$button1.css("display","inline");
$first.attr("page",1);
$button1.attr("page",parseInt(pageIndex)-1);}
if(parseInt(pageIndex)==pageCount){
$button2.css("display","aucun");
$last.css("display","aucun");}
autre{
$last.css("display","inline");
$button2.css("display","inline");
$last.attr("page",pageCount);
$button2.attr("page",parseInt(pageIndex) 1);}

}
//////////////////////////////////////Le nombre de numéros de page affichés sur le côté gauche de la pagination dynamique, le nombre de numéros de page affichés sur le côté droit, la limite des exigences>rlimit
fonction span(pageCount,pageIndex,limit,rlimit){
var isContinue=true;//Indique s'il faut continuer à exécuter la fonction
var html="|<<" ;
var change=(parseInt(pageCount)-parseInt(rlimit))/(parseInt(limit)-2);//Indique le nombre de fois que le numéro de page peut être modifié
si(pageCount!=0&&pageCount!=1){
si(pageCount<=limite){
pour(var i=1; i<=pageCount; i ){
html ="" i ""}
>
autre{
if(parseInt(pageIndex)<(limit-2)){
pour(var i=1; i<=limite; i ){
html ="" i "";}
html="...";
html =right(pageCount,limit,rlimit);
>
autre{
if(parseInt(pageIndex)%(limit-2)==0){
if(parseInt(pageIndex)/(limit-2)<=change&&parseInt(pageIndex)-1 parseInt(limit)-1<=parseInt(pageCount)-parseInt(rlimit)){
for(var i=parseInt(pageIndex)-1; i html ="" i "";}
html="...";
html =right(pageCount,limit,rlimit);
>
autre{
pour(var i=1; i<=rlimit; i ){
html ="" i "";}
html="...";
var rest=parseInt(pageCount)-parseInt(rlimit);
si(reste for(var i=parseInt(rlimit) 1; i<=parseInt(pageCount); i ){
html ="" i "";}
>
autre{
var start=parseInt(pageCount)-parseInt(limit) 1;
pour(var i=start; i<=pageCount; i ){
html ="" i "";}
>
>

>
autre{
html=$("div.pageDivs").html();
$("div.pageDivs").html(html);
isContinue=false;
>
>

}
>
si(estContinuer){
html =">>|";
$("div.pageDivs").html(html);}
changeState(pageIndex,pageCount);
$("div.pageDivs").find("a[page=" parseInt(pageIndex) "]:visible").removeAttr("href").removeClass("disabled").addClass("current").siblings ("a[page:visible").removeClass("current").addClass("disabled").attr("href", "#");
>

page de fonction(pageIndex){

//////////////Placez votre affichage de données spécifique ici et utilisez ajax pour charger et traiter dynamiquement les données

pageCount="Nombre total de pages obtenues grâce au traitement des données";

span(pageCount,pageIndex,7,2);//Appelez l'effet de pagination Ici, il est configuré pour afficher 7 numéros de page à gauche et 2 numéros de page à droite.

}

///////////////////////////////Événements de liaison pour les numéros de page

$("div.pageDivs").find("a:visible").live("click",function(){
var result=$(this).attr("page");
if((typeof $(this).attr("leaf"))!= 'indéfini'){
$(this).removeAttr("href").removeClass("disabled").addClass("current").siblings().removeClass("current").addClass("disabled").attr("href", "#");}

page(résultat);
});
});

C'est tout. L'algorithme de pagination ci-dessus peut être encapsulé, n'a rien à voir avec le projet spécifique et peut être utilisé universellement.