Effet:
HTML :
Copiez le code comme suit :
<div id="page"></div>
usage:
Copiez le code comme suit :
variable totale = 310 ;
var numéro de page = 1 ;
var pageCount = 31;//Combien de pages y a-t-il au total ?
var taille de la page = 10 ;
var nomaction = "liste.action";
var otherParam = "&name='www'&order='time'";
$(fonction(){
paginer();//paginer}
);
css :
Copiez le code comme suit :
#page{
taille de police : 14 px ;
clair : les deux ;
rembourrage supérieur : 1,45em ;
espace blanc : nowrap ;
}
#page a{
fond : blanc ;
bordure : 1px solide #E7ECF0 ;
affichage : bloc en ligne ;
hauteur : 22px ;
hauteur de ligne : 22 px ;
marge droite : 5px ;
alignement du texte : centre ;
décoration de texte : aucune ;
alignement vertical : milieu ;
largeur : 23 px ;
}
#pagePré,#pageSuivant{
}
.pageActuelle{
poids de la police : gras ;
}
js :
Copiez le code comme suit :
fonction mcPaginate(){
var $pageDiv = $("#page");
nomaction = nomaction + "?pageSize="+pageSize;
if(typeof otherParam != 'indéfini' && otherParam != ""){
nomaction = nomaction + autreParam ;
}
$pageDiv.append("page"+pageNo+"/total"+pageCount+"page");
//Page précédente
si (numéro de page > 1) {
var hf = nomaction + "&pageNo="+(pageNo-1);
$pageDiv.append("<a href='"+hf+"' style='width: 65px;'>"+"Page précédente"+"</a>");
} ;
si(pageCount <= pageSize){
pour(var i=0; i < pageCount; i++){
var hf = nomaction + "&pageNo="+(i+1);
if(pageNo == (i+1)){//Page actuelle
$pageDiv.append("<a href=""+hf+"' class='pageCurrent'>"+pageNo+"</a>");
}autre{
$pageDiv.append("<a href=""+hf+"'>"+(i+1)+"</a>");
} ;
} ;
}autre{
pour(var i=0; i < pageSize; i++){
var midIndex = 0 ;
si(pageSize%2 == 0){
midIndex = pageSize/2 - 1 ;
}autre{
midIndex = pageSize/2;
}
var num = -midIndex;
var showPageNum = pageNo+i+num;
if(showPageNum > 0 && showPageNum <= pageCount){
var hf = nomaction + "&pageNo="+showPageNum;
if(pageNo == showPageNum){//Page actuelle
$pageDiv.append("<a href=""+hf+"' class='pageCurrent'>"+showPageNum+"</a>");
}autre{
$pageDiv.append("<a href=""+hf+"'>"+showPageNum+"</a>");
} ;
} ;
} ;
}
//Page suivante
si (pageNo < pageCount){
var hf = nomaction + "&pageNo="+(pageNo+1);
$pageDiv.append("<a href='"+hf+"' style='width: 65px;'>"+"Page suivante"+"</a>");
} ;
$pageDiv.append("Aller à "+"<input type='text' class='goNum' style='width:30px;' name='goNum'>page<input type='button' name='goButton' class='goButton' value='OK'>");
$(".goButton").click(function(){
var goNum = $(".goNum").val();
si(goNum!=""){
window.location.href = actionName + "&pageNo="+goNum;
}
});
} ;