Este artículo les presentará un increíbleplugin de paginación jQuery:jqPaginator.

jqPaginator es un componente de paginación jQuery simple y altamente personalizable, adecuado para múltiples escenarios de aplicación.

Introducción

Ahora hay muchos componentes de paginación diferentes en Internet, pero es difícil encontrar uno que sea completamente "satisfactorio", así que nació jqPaginator.

El componente de paginación ideal en mi mente no debería estar limitado por marcos CSS y podría usarse en páginas web de diferentes estilos. Desde mi humilde experiencia, para lograr este objetivo, un punto clave es la estructura HTML altamente personalizable. Por lo tanto, jqPaginator se esfuerza por lograr una personalización dentro de un rango razonable, lo que le permite usarse de manera flexible en varios escenarios diferentes.

Captura de pantalla del efecto:

013027_u0hW_1456287

Instrucciones de uso

Ejemplo

El uso es muy simple: primero introduce jQuery y jqPaginator, luego puedes inicializar la paginación.

$('#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 + '页');
    }
});

El ejemplo anterior es el primer Demo, una paginación de estilo Bootstrap. Los parámetros específicos se presentarán más adelante. Lo que hay que entender aquí es que si no se usa id, sino class, se inicializarán todos los elementos de esa clase, logrando el efecto de "dos paginaciones vinculadas" de arriba.

Parámetros

Parámetros Valor predeterminado Descripción
totalPages 0 Establece el número total de páginas de la paginación
totalCounts 0 Establece el número total de elementos de la paginación
pageSize 0 Establece el número de elementos por página
NotaDebes establecer totalPages, o totalCounts + pageSize; de lo contrario, se produce un error; después de establecer totalCounts y pageSize, totalPages se calcula automáticamente.
currentPage 1 Establece el número de página actual
visiblePages 7 Establece el número máximo de páginas mostradas (por ejemplo, si hay 100 páginas y estás en la página 1, se muestran las páginas 1 - 7)
disableClass 'disabled' Establece el estilo de "estado deshabilitado" para la primera página, página anterior, página siguiente y última página
activeClass 'active' Establece el estilo del número de página actual
first (ninguno) Establece la estructura HTML de "Inicio"
prev (ninguno) Establece la estructura HTML de "Anterior"
next (ninguno) Establece la estructura HTML de "Siguiente"
last (ninguno) Establece la estructura HTML de "Última página"
page (ninguno) Establece la estructura HTML de los números de página, donde se pueden usar{{page}}representa la página actual,{{totalPages}}representa el número total de páginas,{{totalCounts}}representa el número total de elementos (por ejemplo: el Demo de "estilo minimalista" de arriba se implementó usando {{placeholders}} y estableciendo visiblePages en 1).
wrapper (ninguno) Envoltura HTML de la estructura de paginación, por ejemplo:
, generalmente no se usa
onPageChange (ninguno) Función de devolución de llamada, que se activa al cambiar de página (incluida la inicialización de la primera página), y recibe el número de la "página de destino"

Métodos de extensión

jqPaginator proporciona dos métodos de extensión para facilitar la operación del componente después de la inicialización.

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

Modificar dinámicamente la configuración después de la inicialización

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

Destruir jqPaginator

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

Recursos relacionados