Cet article présentera unplugin de pagination jQuerytrès impressionnant : jqPaginator.

jqPaginator est un composant de pagination jQuery épuré et hautement personnalisable, adapté à une variété de scénarios d'application.

Introduction

Il existe de nombreux composants de pagination sur Internet, mais il est difficile d'en trouver un qui soit entièrement satisfaisant, c'est ainsi que jqPaginator est né.

Le composant de pagination idéal selon moi ne devrait pas être limité par les frameworks CSS et devrait pouvoir être utilisé dans des pages web de styles différents. D'après ma modeste expérience, la clé pour atteindre cet objectif est une structure HTML hautement personnalisable. Par conséquent, jqPaginator s'efforce d'offrir une personnalisation dans une mesure raisonnable, ce qui le rend flexible pour une utilisation dans divers scénarios.

Capture d'écran :

013027_u0hW_1456287

Utilisation

Exemple

L'utilisation est très simple : incluez d'abord jQuery et jqPaginator, puis vous pouvez initialiser la pagination.

$('#id').jqPaginator({
    totalPages: 100,
    visiblePages: 10,
    currentPage: 1,

    first: '<li class="first"><a href="#">First</a></li>',
    prev: '<li class="prev"><a href="#">Previous</a></li>',
    next: '<li class="next"><a href="#">Next</a></li>',
    last: '<li class="last"><a href="#">Last</a></li>',
    page: '<li class="page"><a href="#">{{page}}</a></li>',
    onPageChange: function (num) {
        $('#text').html('当前第' + num + '页');
    }
});

L'exemple ci-dessus est la première démo, une pagination de style Bootstrap. Les paramètres spécifiques seront présentés plus tard. Ce que vous devez savoir ici, c'est que si vous utilisez une classe au lieu d'un id, cela initialisera tous les éléments de cette classe, produisant l'effet « deux paginations liées » montré ci-dessus.

Parameters

Paramètre Valeur par défaut Description
totalPages 0 Définit le nombre total de pages pour la pagination.
totalCounts 0 Définit le nombre total d'éléments pour la pagination.
pageSize 0 Définir le nombre d'éléments par page.
Remarque: Définir soit totalPages, soit totalCounts + pageSize, sinon une erreur sera levée ; après avoir défini totalCounts et pageSize, totalPages sera automatiquement calculé.
currentPage 1 Définir le numéro de page actuel.
visiblePages 7 Définir le nombre maximum de numéros de page affichés (par exemple, s'il y a 100 pages et que la page actuelle est 1, les pages 1 - 7 seront affichées).
disableClass 'disabled' Définir le style « état désactivé » pour la première page, la page précédente, la page suivante et la dernière page.
activeClass 'active' Définir le style du numéro de page actuel.
first (None) Définir la structure HTML de « Première ».
prev (None) Définir la structure HTML de "Précédent".
next (None) Définir la structure HTML de "Suivant".
last (None) Définir la structure HTML de "Dernier".
page (None) Définir la structure HTML pour les numéros de page, dans laquelle vous pouvez utiliser{{page}}pour représenter la page actuelle,{{totalPages}}pour représenter le nombre total de pages,{{totalCounts}}pour représenter le nombre total d'éléments (par exemple : la démo "style minimaliste" ci-dessus utilise {{placeholder}} et définit visiblePages sur 1 pour y parvenir.)
wrapper (None) Enveloppe HTML pour la structure de pagination, par exemple :
, généralement pas nécessaire.
onPageChange (None) Fonction de rappel, déclenchée lorsque la page change (y compris lors de l'initialisation de la première page). Elle reçoit le numéro de page de la "page cible".

Méthodes d'extension

jqPaginator fournit deux méthodes d'extension pour manipuler facilement le composant après l'initialisation.

$('#id').jqPaginator('option', options)

Modifier dynamiquement la configuration après l'initialisation.

$('#id').jqPaginator('option', {
    currentPage: 1
});
 
$('#id').jqPaginator('destroy')

Détruire jqPaginator.

$('#id').jqPaginator('destroy');

Ressources associées