Javascript Girl
  1. Javascript Girl
  3. Pagination simple en javascript
Intereting Posts
Saisir la chaîne de requête en utilisant javascript Composé de réactionDidMount ne déclenche pas Window.pixelRatio ne fonctionne pas dans Opera. Une alternative? Impossible de faire référence à un élément créée dynamiquement par son nom Désactiver la minification de l'actif dans la production de rails Comment supprimer le dernier mot dans la chaîne en utilisant JavaScript Problèmes d'évolutivité liés à socket.io Validation de formulaire avec JavaScript Déclaration de rupture dans la méthode de la carte matricielle javascript Existe-t-il un moyen simple d'utiliser le bouton pour naviguer dans la page car un lien est en angularjs Comment ouvrir .EXE avec Javascript / XPCOM en tant que Windows "Exécuter …"? Ajouter et supprimer la classe active à partir d'un lien de navigation Comment convertir une liste de nœuds DOM sur un tableau en Javascript? Comparaison des bibliothèques Javascript IOS moteur Javascript parseFloat (1) renvoie un nombre négatif

Pagination simple en javascript

J'essaie de faire de la pagination pour mon site. ( Http://anuntorhei.md )

CODE : 

var someVar = 50; function someStupidFunction() { if (objJson.length > 50) { document.getElementById("nextPage").style.visibility = "visible"; } if (someVar <= 50) { document.getElementById("prevPage").style.visibility ="hidden"; } else { document.getElementById("prevPage").style.visibility = "visible"; } } function nextPage() { document.getElementById("listingTable").innerHTML = ""; if (someVar < objJson.length) { document.getElementById("nextPage").style.visibility = "visible"; } else { document.getElementById("nextPage").style.visibility = "hidden"; } for (var i = someVar - 50; i < someVar; i++) { document.getElementById("listingTable").innerHTML += objJson[i].adName + "<br>"; } someVar += 50; document.getElementById("prevPage").style.visibility = "visible"; } function prevPage() { document.getElementById("listingTable").innerHTML = ""; if (someVar > 50) { document.getElementById("prevPage").style.visibility = "visible"; } else { document.getElementById("prevPage").style.visibility = "hidden"; } for (var i = someVar - 50; i < someVar; i++) { document.getElementById("listingTable").innerHTML += objJson[i].adName + "<br>"; } someVar -= 50; document.getElementById("nextPage").style.visibility = "visible"; }

Mais je ne comprends pas comment "cacher" le bouton someVar lorsque someVar est plus grand que objJson.length .

Et lorsque j'arrive à la "fin", le bouton nextPage disparaît après que objJson soit plus petit que someVar . Qu'est-ce qui ne va pas dans ce code?

Comment puis-je le changer pour le rendre parfait? Désolé pour mon mauvais anglais, je ne peux pas expliquer tout ce dont j'ai besoin, j'espère que vous comprenez ce dont j'ai besoin!

Je traiterai toute question que vous avez … mais voici un modèle amélioré que vous devriez suivre pour réduire la duplication de code.

Cependant, en tant que sidenote, vous devriez envisager de ne pas faire de pagination sur le client. Puisque si vous disposez d'un ensemble de données énorme, cela signifie que vous devez télécharger toutes les données avant que votre page ne soit chargée. Mieux vaut mettre en place la pagination côté serveur.

Fiddle: http://jsfiddle.net/Lzp0dw83/

HTML 

 <div id="listingTable"></div> <a href="javascript:prevPage()" id="btn_prev">Prev</a> <a href="javascript:nextPage()" id="btn_next">Next</a> page: <span id="page"></span>

Javascript (mettre n'importe où): 

 var current_page = 1; var records_per_page = 2; var objJson = [ { adName: "AdName 1"}, { adName: "AdName 2"}, { adName: "AdName 3"}, { adName: "AdName 4"}, { adName: "AdName 5"}, { adName: "AdName 6"}, { adName: "AdName 7"}, { adName: "AdName 8"}, { adName: "AdName 9"}, { adName: "AdName 10"} ]; // Can be obtained from another source, such as your objJson variable function prevPage() { if (current_page > 1) { current_page--; changePage(current_page); } } function nextPage() { if (current_page < numPages()) { current_page++; changePage(current_page); } } function changePage(page) { var btn_next = document.getElementById("btn_next"); var btn_prev = document.getElementById("btn_prev"); var listing_table = document.getElementById("listingTable"); var page_span = document.getElementById("page"); // Validate page if (page < 1) page = 1; if (page > numPages()) page = numPages(); listing_table.innerHTML = ""; for (var i = (page-1) * records_per_page; i < (page * records_per_page); i++) { listing_table.innerHTML += objJson[i].adName + "<br>"; } page_span.innerHTML = page; if (page == 1) { btn_prev.style.visibility = "hidden"; } else { btn_prev.style.visibility = "visible"; } if (page == numPages()) { btn_next.style.visibility = "hidden"; } else { btn_next.style.visibility = "visible"; } } function numPages() { return Math.ceil(objJson.length / records_per_page); } window.onload = function() { changePage(1); };

MISE À JOUR 2014/08/27

Il y a un bogue ci-dessus, où les erreurs de boucle for out lorsqu'une page particulière (la dernière page habituellement) ne contient pas de nombre d'enregistrements records_per_page car elle tente d'accéder à un indice inexistant.

Le correctif est assez simple, en ajoutant une condition de contrôle supplémentaire dans la boucle for pour tenir compte de la taille de objJson :

Violoncelle mise à jour: http://jsfiddle.net/Lzp0dw83/1/ 

 for (var i = (page-1) * records_per_page; i < (page * records_per_page) && i < objJson.length; i++)