This article will introduce a very impressivejQuery pagination plugin:jqPaginator。

jqPaginator is a clean, highly customizable jQuery pagination component suitable for a variety of application scenarios.

Introduction

There are many pagination components on the Internet, but it is hard to find one that is completely satisfactory, so jqPaginator was born.

The ideal pagination component in my mind should not be restricted by CSS frameworks, and should be usable in webpages of different styles. Based on my limited experience, the key to achieving this goal is a highly customizable HTML structure. Therefore, jqPaginator strives to provide customization within a reasonable range, making it flexible for use in various scenarios.

Screenshot:

013027_u0hW_1456287

Usage

Example

The usage is very simple: first include jQuery and jqPaginator, then you can initialize the 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 + '页');
    }
});

The above example is the first demo, a Bootstrap-style pagination. The specific parameters will be introduced later. What you need to know here is that if you use a class instead of an id, it will initialize all elements of that class, achieving the "two paginations linked" effect shown above.

Parameters

Parameter Default value Description
totalPages 0 Set the total number of pages for the pagination.
totalCounts 0 Set the total number of items for the pagination.
pageSize 0 Set the number of items per page.
Note: Either set totalPages, or set totalCounts + pageSize, otherwise an error will be thrown; after setting totalCounts and pageSize, totalPages will be automatically calculated.
currentPage 1 Set the current page number.
visiblePages 7 Set the maximum number of page numbers displayed (for example, if there are 100 pages and the current page is 1, pages 1 - 7 will be displayed).
disableClass 'disabled' Set the "disabled state" style for the first page, previous page, next page, and last page.
activeClass 'active' Set the current page number style.
first (None) Set the HTML structure of "First".
prev (None) Set the HTML structure of "Previous".
next (None) Set the HTML structure of "Next".
last (None) Set the HTML structure of "Last".
page (None) Set the HTML structure for page numbers, in which you can use{{page}}to represent the current page,{{totalPages}}to represent the total number of pages,{{totalCounts}}to represent the total number of items (for example: the "minimalist style" Demo above uses {{placeholder}} and sets visiblePages to 1 to achieve this.)
wrapper (None) HTML wrapper for the pagination structure, for example: <div class="your class"></div>, generally not needed.
onPageChange (None) Callback function, triggered when the page changes (including when initializing the first page). It receives the page number of the "target page".

Extension Methods

jqPaginator provides two extension methods for conveniently operating the component after initialization.

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

Dynamically modify the configuration after initialization.

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

Destroy jqPaginator.

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

Related Resources