Appel:
Copiez le code comme suit :
var pageChange = fonction (index) {
var html = pager("divid", index, 5, 1000, pageChange, { showGoTo : false, showFirst : false });
}
accomplir:
Copiez le code comme suit :
pager = fonction (divPager, pageIndex, pageSize, totalCount, pageChange, opt) {
var l'Opt = {
barSize: 5, //Le nombre de pages affichées dans la barre de pagination
barTemplate : "{bar} totalise {totalPage} pages {totalCount} éléments {goto}", // modèle d'affichage
autoHide : true, //S'il faut se cacher automatiquement
showFirst : true, //S'il faut afficher automatiquement le lien de la première page lorsque totalPage>barSize
showLast : true, //S'il faut afficher automatiquement le lien de la dernière page lorsque totalPage>barSize
showGoTo : true, //S'il faut afficher GoTo
autoHideGoTo : true // S'il y en a trop peu, masquer automatiquement GoTo
} ;
si (opter) {
si (opt.barSize)
theOpt.barSize = opt.barSize;
si (opt.barTemplate)
theOpt.barTemplate = opt.barTemplate;
si (opt.autoHide == false)
theOpt.autoHide = faux ;
si (opt.showFirst == false)
theOpt.showFirst = faux ;
si (opt.showLast = false)
theOpt.showLast = faux ;
si (opt.showGoTo == false)
theOpt.showGoTo = faux ;
si (opt.autoHideGoTo == false)
theOpt.autoHideGoTo = faux ;
}
var handles = window.myPagerChanges = (function (x) { return x; } (window.myPagerChanges || {}));
si (!myPagerChanges[divPager]) myPagerChanges[divPager] = pageChange;
var startPage = 0; //Page de démarrage de la barre de pagination
var endPage = 0; //Page de fin de la barre de page
var showFirst = vrai ;
var showLast = vrai;
si (isNaN(pageIndex)) {
pageIndex = 1 ;
}
pageIndex = parseInt(pageIndex);
si (pageIndex <= 0)
pageIndex = 1 ;
if (pageIndex * pageSize > totalCount) {
pageIndex = Math.ceil(totalCount / pageSize);
}
if (totalCount == 0) { // S'il n'y a pas de données
document.getElementById(divPager).innerHTML = "";
retour "";
}
var totalPage = Math.ceil(totalCount / pageSize);
if (theOpt.autoHide && totalCount <= pageSize) { //Masquage automatique
document.getElementById(divPager).innerHTML = "";
retour "";
}
si (totalPage <= theOpt.barSize) {
page de démarrage = 1 ;
endPage = this.totalPage;
theOpt.showLast = theOpt.showFirst = false ;
}
autre {
if (pageIndex <= Math.ceil(theOpt.barSize / 2)) { //Les premières pages
page de démarrage = 1 ;
endPage = theOpt.barSize;
theOpt.showFirst = faux ;
}
else if (pageIndex > (totalPage - theOpt.barSize / 2)) { //Les dernières pages
startPage = totalPage - theOpt.barSize + 1 ;
finPage = totalPage;
theOpt.showLast = faux ;
}
else { //La page du milieu
startPage = pageIndex - Math.ceil(theOpt.barSize / 2) + 1;
endPage = pageIndex + Math.floor(theOpt.barSize / 2);
}
if (totalPage <= (theOpt.barSize * 1.5)) {
theOpt.showLast = theOpt.showFirst = false ;
}
}
fonction _getLink(index, txt) {
si (!txt) txt = index ;
return "<a href='javascript:;' style='margin: 2px 5px;border: 1px solid #6d8cad;color: #0269BA;padding: 2px 5px;text-decoration: none;' onclick='myPagerChanges[/" " + divPager + "/"](" + index + ")'>" + txt + "</a>";
}
var barHtml = "" ; //Barre de page
barHtml += pageIndex == 1 ? " : _getLink(pageIndex - 1, "Page précédente");
si (theOpt.showFirst) {
barHtml += _getLink(1) + "<span>...</span>";
}
pour (var index = startPage; index <= endPage; index++) {
si (index == pageIndex) {
barHtml += "<span style='color:red;font-weight:blod; '>" + index + "</span>";
}
autre {
barHtml += _getLink(index);
}
}
si (theOpt.showLast) {
barHtml += "<span>...</span>" + _getLink(totalPage);
}
barHtml += pageIndex == totalPage "" : _getLink(pageIndex + 1, "page suivante");
var gotoHtml = ""; //aller à la boîte et au bouton
if (theOpt.showGoTo && theOpt.barTemplate.indexOf("{goto}") > 0) {
if ((theOpt.autoHideGoTo && totalPage > 15) || theOpt.autoHideGoTo == false) {
var txtid = divPager + "_goIndex" ;
var indexVal = "document.getElementById(/"" + txtid + "/").value";
gotoHtml += "<input type='text' onkeypress='if(event.keyCode==13){myPagerChanges[/"" + divPager + "/"](" + indexVal + ")}' id='" + txtid + "' value=" + pageIndex + " style='width:30px'>";
gotoHtml += "<input type='button' class='page_bg' value='go' onclick='myPagerChanges[/"" + divPager + "/"](" + indexVal + ")'>";
}
}
//remplace le modèle
var pagerHtml = theOpt.barTemplate.replace("{bar}", barHtml)
.replace("{totalCount}", totalCount)
.replace("{pageIndex}", pageIndex)
.replace("{totalPage}", totalPage)
.replace("{goto}", gotoHtml);
document.getElementById(divPager).innerHTML = pagerHtml;
retourner pagerHtml ;
} ;