JQuery – Pagination Javascript

En ce moment je suis très JQuery, je cherche des nouveautés ou des éléments liés à cette librairie et parfois on tombe sur des créations assez originales. Comme la pagination avec JQuery.

En quoi consiste la pagination JQuery ?

En fait, JQuery pagination plugin, va vous permettre de créer des pages lorsque vous avez trop d’éléments à afficher sur une même page. Comme une démo, vaut mieux que de longs discours, cliquez sur l’image pour vous rendre sur la partie démo du plugin :

JQuery pagination plugin

JQuery pagination plugin

Vous avez vu ? C’est plutôt sympa et le tout en javascript. L’installation reste assez aisée et ceux qui ont l’habitude de travailler avec JQuery ne devraient pas avoir de problème.

Exemple rapide d’utilisation :

// First Parameter: number of items
// Second Parameter: options object
$("#News-Pagination").pagination(122, {
    items_per_page:20,
    callback:handlePaginationClick
});

En gros, une fois que vous avez inclue le plugin et le css de ce dernier, vous devrez créer une div qui contient tous vos éléments, avec pour cet exemple, l’id « New-Pagination ».
Le premier paramètre est le nombre total d’items, le deuxième contient les options, la configuration du plugin (Que vous pouvez retrouver ici).

Dès le clique sur un lien, une fonction callback est appelée, dans l’exemple précédent ce sera la fonction « handlePaginationClick ».

function handlePaginationClick(new_page_index, pagination_container) {
        // This selects 20 elements from a content array
        for(var i=new_page_id;i<;i++) {
            $('#MyContentArea').append(content[i]);
        }
        return false;
    }

Retrouvez la source : http://plugins.jquery.com/project/pagination
La doc : http://d-scribe.de/webtools/jquery-pagination/lib/jquery_pagination/README
Et la démo : http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm

Si vous souhaitez que j’approfondisse et que je fasse des exemples, n’hésitez pas à en faire la demande :)

Comments
  1. Su4p
  2. Olivier TABARY
  3. LudiKadmin

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*