Comment utiliser SimplePagination jquery

Une chose à noter à propos de ce plugin, dont certaines personnes peuvent se confondre, est que techniquement, ne met pas en œuvre la pagination elle-même. Il génère un navigateur de page et fournit les moyens, via les événements jQuery, pour simplement le brancher à notre propre fonctionnalité de pagination.

En supposant que vous avez suivi les étapes 1 (et 2 si vous voulez le style CSS) requis à partir du lien simplePagination que vous avez inclus dans votre question, le jQuery suivant fera ce dont vous avez besoin:

 jQuery(function($) { // Consider adding an ID to your table // incase a second table ever enters the picture. var items = $("table tbody tr"); var numItems = items.length; var perPage = 2; // Only show the first 2 (or first `per_page`) items initially. items.slice(perPage).hide(); // Now setup the pagination using the `.pagination-page` div. $(".pagination-page").pagination({ items: numItems, itemsOnPage: perPage, cssStyle: "light-theme", // This is the actual page changing functionality. onPageClick: function(pageNumber) { // We need to show and hide `tr`s appropriately. var showFrom = perPage * (pageNumber - 1); var showTo = showFrom + perPage; // We'll first hide everything... items.hide() // ... and then only show the appropriate rows. .slice(showFrom, showTo).show(); } }); // EDIT: Let's cover URL fragments (ie #page-3 in the URL). // More thoroughly explained (including the regular expression) in: // https://github.com/bilalakil/bin/tree/master/simplepagination/page-fragment/index.html // We'll create a function to check the URL fragment // and trigger a change of page accordingly. function checkFragment() { // If there's no hash, treat it like page 1. var hash = window.location.hash || "#page-1"; // We'll use a regular expression to check the hash string. hash = hash.match(/^#page-(\d+)$/); if(hash) { // The `selectPage` function is described in the documentation. // We've captured the page number in a regex group: `(\d+)`. $(".pagination-page").pagination("selectPage", parseInt(hash[1])); } }; // We'll call this function whenever back/forward is pressed... $(window).bind("popstate", checkFragment); // ... and we'll also call it when the page has loaded // (which is right now). checkFragment(); }); 

Vous pouvez trouver un exemple en cours d'exécution ici , et un guide plus complet sur simplePagination ici si vous souhaitez mieux comprendre comment tout cela fonctionne.

EDIT: Ajout d'une section de code pour gérer les fragments d'URL (sur le rechargement et l'arrière / vers l'avant), comme l'a souligné Mike O'Connor. Vous pouvez voir ici un exemple en direct de gestion des fragments d'URL.

EDIT 2: si vous avez besoin de compatibilité entre les navigateurs pour la mise à jour du fragment retour / avant (IE11 …), incluez le script History.js avant d'implémenter le code ci-dessus. Merci à Mike O'Connor pour cela 🙂

EDIT 3: Si vous ajoutez ou supprimez dynamiquement le contenu, vous devrez mettre à jour manuellement le paginateur pour refléter ces modifications. J'ai également illustré un exemple. Vous pouvez le voir en cours d'exécution ici .

Ok J'ai testé le jQuery de Bilal Akil (fonction ($) et c'était un bon début pour moi — merci Bilal. Cela fonctionne, mais avec des lacunes. D'une part, si vous accédez à son premier lien et cliquez sur une page 2 alors ce numéro apparaît dans la zone d'emplacement comme " http://bilalakil.me/bin/simplepagination/#page-2 " — dans la # page-2. Mais si vous copiez cette URL entière et collez-la dans la zone de l'emplacement Zone de localisation d'un autre onglet ou fenêtre pour simuler quelqu'un qui se connecte à la page 2, alors il ne fonctionne pas, vous vous retrouverez à la page 1. Ou après vous cliquez sur le bouton de la page 2 et allez à la page 2, vous pouvez simplement le recharger La page, vous vous trouverez à la page 1.

J'aurais commenté, mais je dois laisser un code ici. Voici mon jQuery modifié (fonction ($) avec la solution de ce problème particulier:

  var items = $("#content .page"); var numItems = items.length; var hashPageNum = getPageNum(); //code for getPageNum() is below items.hide().slice(hashPageNum-1, hashPageNum).show(); // now setup pagination $("#pagination").pagination({ items: numItems, itemsOnPage: 1, cssStyle: "light-theme", onPageClick: function(pageNumber) { items.hide().slice(pageNumber-1, pageNumber).show(); } }); $('#pagination').pagination('drawPage', hashPageNum); 

J'aurais dû préfacer cela en disant que le schéma de sélection que j'utilise pour les éléments de la page est le suivant:

 <div id="pagination"></div> <table id="content"><tbody><tr class="page"><td>... 

Et j'utilise juste perPage = 1, un <tr> par page, mais la différence essentielle est cette ligne:

 items.hide().slice(hashPageNum-1, hashPageNum).show(); 

C'est la solution principale pour ce problème concernant les liens avec la # page-n à la fin ne fonctionnant pas. La dernière ligne est également nécessaire à cet effet, car elle définit la barre de pagination avec la page n sélectionnée.

Le deuxième problème est le dysfonctionnement total des boutons arrière et avant avec le code nu de Bilal. Si vous placez la barre de pagination au bas d'une longue page, les lecteurs vont certainement vouloir utiliser la navigation intégrée de la page du navigateur. EDIT: Bilal a depuis mis à jour son code pour supprimer ces problèmes.

Voici donc une fonction qui a un détail essentiel à cette fin. Il est appelé dans le code ci-dessus mais dans un autre endroit aussi:

 function getPageNum(){ var hashtag = parent.location.hash; var hashPageNum = 1; //default if (hashtag == '#page-1') { hashPageNum=1; } else if (hashtag == '#page-2'){ hashPageNum=2; } else if (hashtag == '#page-3') { hashPageNum=3; } else if (hashtag == '') { hashPageNum=1; parent.location.hash = '#page-1'; }; return hashPageNum; }; 

OK, je comprends que je n'ai pas été sophistiqué, mais le détail essentiel est que si parent.location.hash est nul, la fonction renvoie 1, pour la page 1 — pas nulle.

Il y a maintenant une autre étape, et c'est d'armurer window.onpopstate, qui est une chose HTML5 (j'espère que cela ne causera pas de problème avec les navigateurs non-html5 … comment si vous en savez tout):

 window.onpopstate = function(e){ var pagenum = getPageNum(); $("#content .page").hide().slice(pagenum-1, pagenum).show(); $('#pagination').pagination('drawPage', pagenum); }; 

Et avec cela, je semble être fait. Je peux copier les URL avec les suffixes # page-n et les lancer ailleurs et ils fonctionnent. Les boutons avant et arrière fonctionnent. Notez que le bit 'DrawPage' dans le code ci-dessus est simplement pour ajuster l'indication dans la barre de pagination.

OK, il s'agit d'une édition le 20/02/2015 … pour afficher un correctif pour le problème IE11 qui est discuté dans les commentaires. Je n'ai pas édité le code ci-dessus, car peut-être que vous ne voudrez pas réparer cette solution, même si cela semble fonctionner.

Commencez par aller à ce projet github puis tapez "t" pour les fichiers (hh!) Et cliquez sur history.min.js puis sur le bouton Raw et faites un SaveAs dans votre navigateur. Vous utiliserez donc cette bibliothèque JavaScript qui crée efficacement des événements popstate (et d'autres événements) pour les navigateurs qui ne les augmentent pas.

Maintenant, dans le code ci-dessus, supprimez la fenêtre.onpopstate = function (e) {}, mais enregistrez son bloc de code et insérez-le à la fin de jQuery (fonction ($), juste après $ ('# pagination'). Pagination ( 'DrawPage', hashPageNum), comme suit:

  $(window).on('popstate', function(e) { var pagenum = getPageNum(); $("#content .page").hide().slice(pagenum-1, pagenum).show(); $('#pagination').pagination('drawPage', pagenum); }); 

EDIT Je dois ajouter que si vous mettez un lien vers l'une de vos pages ainsi paginées sur votre site — par exemple, votre page d'accueil a probablement des ancres dans le menu qui se rapporte à certaines de vos pages paginées — alors si vous Mettez target = "_ blank" dans le lien et pour le href, mettez http://www.yourdomain.com/support de votre page, tout ira bien. Ce sera bien parce que vous n'essayez pas d'utiliser la flèche arrière sur votre navigateur pour revenir à votre page d'accueil car la page paginée sera ouverte comme un nouvel onglet ou une nouvelle fenêtre.

Mais … si vous quittez la cible = "_ blank" et que vous ouvriez la page paginée dans la même fenêtre, vous constaterez que le bouton de retour ne fonctionne pas. L'histoire est là pour voir lorsque vous appuyez sur la flèche arrière (en fait, c'est faux, car il existe deux listes de votre page intégrée), mais aucune quantité de clic sur la flèche ne l'amènera à fonctionner.

Le remède est simplement de mettre http://www.yourdomain.com/votrepagepour la page 1 dans votre href … avec le # page-1. Ensuite, la flèche arrière fonctionnera.

J'ai testé le jQuery de Bilal Akil (fonction ($)) et j'ai trouvé une erreur que j'aimerais corriger … Et merci à Bilal pour votre implication sur ce sujet.

Comme je ne peux pas publier un commentaire ou suggérer une édition de son article, je publierai ma réponse directement ici. Pour plus d'informations, consultez le post de Bilal Akil.

Le sélecteur pour la pagination était incorrect (pas le même en fait) dans le code que je l'ai essayé sur un site Web, j'ai donc décidé de modifier votre publication et d'ailleurs j'ai ajouté 2 variables pour assurer la flexibilité pour les changements futurs ou la personnalisation personnalisée.

 // mind the slight change below, personal idea of best practices jQuery(function($) { // consider adding an id to your table, // just incase a second table ever enters the picture..? var items = $("table tbody tr"); var numItems = items.length; var perPage = 2; var pagination_placeholder_selector = ".pagination-page"; // put in a variable to ensure proper changes in the future var myPageName = "#page-"; // a number will follow for each page // only show the first 2 (or "first per_page") items initially items.slice(perPage).hide(); // now setup your pagination // you need that .pagination-page div before/after your table $(pagination_placeholder_selector).pagination({ items: numItems, itemsOnPage: perPage, cssStyle: "light-theme", hrefTextPrefix: myPageName, onPageClick: function(pageNumber) { // this is where the magic happens // someone changed page, lets hide/show trs appropriately var showFrom = perPage * (pageNumber - 1); var showTo = showFrom + perPage; items.hide() // first hide everything, then show for the new page .slice(showFrom, showTo).show(); } }); // EDIT: extra stuff to cover url fragments (ie #page-3) // https://github.com/bilalakil/bin/tree/master/simplepagination/page-fragment // is more thoroughly commented (to explain the regular expression) // we'll create a function to check the url fragment and change page // we're storing this function in a variable so we can reuse it var checkFragment = function() { // if there's no hash, make sure we go to page 1 var hash = window.location.hash || (myPageName+"1"); // we'll use regex to check the hash string var re = new RegExp("^"+myPageName+"(\\d+)$"); hash = hash.match(re); if(hash) // the selectPage function is described in the documentation // we've captured the page number in a regex group: (\d+) $(pagination_placeholder_selector).pagination("selectPage", parseInt(hash[1])); }; // we'll call this function whenever the back/forward is pressed $(window).bind("popstate", checkFragment); // and we'll also call it to check right now! checkFragment(); }); 

J'ai converti le travail de Bilal Akil en une fonction et l'ai appelé dans ajax alors que je charge les données par un appel ajax. Cela fonctionne génial. Merci à tous les participants.

 function paginate() { // consider adding an id to your table, // just incase a second table ever enters the picture..? var items = jQuery("#searched_prfiles .row .col-md-4"); var numItems = items.length; var perPage = 2; var pagination_placeholder_selector = "#pagination_links"; // put in a variable to ensure proper changes in the future var myPageName = "#page-"; // a number will follow for each page // only show the first 2 (or "first per_page") items initially items.slice(perPage).hide(); // now setup your pagination // you need that .pagination-page div before/after your table jQuery(pagination_placeholder_selector).pagination({ items: numItems, itemsOnPage: perPage, cssStyle: "light-theme", hrefTextPrefix: myPageName, onPageClick: function(pageNumber) { // this is where the magic happens // someone changed page, lets hide/show trs appropriately var showFrom = perPage * (pageNumber - 1); var showTo = showFrom + perPage; items.hide() // first hide everything, then show for the new page .slice(showFrom, showTo).show(); } }); // EDIT: extra stuff to cover url fragments (ie #page-3) // https://github.com/bilalakil/bin/tree/master/simplepagination/page-fragment // is more thoroughly commented (to explain the regular expression) // we'll create a function to check the url fragment and change page // we're storing this function in a variable so we can reuse it var checkFragment = function() { // if there's no hash, make sure we go to page 1 var hash = window.location.hash || (myPageName+"1"); // we'll use regex to check the hash string var re = new RegExp("^"+myPageName+"(\\d+)$"); hash = hash.match(re); if(hash) // the selectPage function is described in the documentation // we've captured the page number in a regex group: (\d+) jQuery(pagination_placeholder_selector).pagination("selectPage", parseInt(hash[1])); }; // we'll call this function whenever the back/forward is pressed jQuery(window).bind("popstate", checkFragment); // and we'll also call it to check right now! checkFragment(); 

}