В этой статье будет представлен очень впечатляющийплагин пагинации jQuery:jqPaginator.

jqPaginator — это чистый, легко настраиваемый компонент пагинации jQuery, подходящий для самых разных сценариев применения.

Введение

В интернете есть много компонентов пагинации, но трудно найти полностью удовлетворяющий, поэтому jqPaginator и появился.

Идеальный компонент пагинации, по моему мнению, не должен быть ограничен CSS-фреймворками и должен быть пригоден для использования на веб-страницах разных стилей. Основываясь на моём небольшом опыте, ключом к достижению этой цели является легко настраиваемая структура HTML. Поэтому jqPaginator стремится обеспечить настройку в разумных пределах, делая его гибким для использования в различных сценариях.

Скриншот:

013027_u0hW_1456287

Использование

Пример

Использование очень простое: сначала подключите jQuery и jqPaginator, затем можно инициализировать пагинацию.

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

Приведённый выше пример — это первая демонстрация, пагинация в стиле Bootstrap. Конкретные параметры будут представлены позже. Здесь вам нужно знать, что если вы используете class вместо id, будут инициализированы все элементы этого class, что даст показанный выше эффект «двух связанных пагинаций».

Parameters

Параметр Значение по умолчанию Описание
totalPages 0 Задаёт общее количество страниц для пагинации.
totalCounts 0 Задаёт общее количество элементов для пагинации.
pageSize 0 Установите количество элементов на странице.
Примечание: Задайте либо totalPages, либо totalCounts + pageSize, иначе будет выдана ошибка; после установки totalCounts и pageSize totalPages будет рассчитан автоматически.
currentPage 1 Установите номер текущей страницы.
visiblePages 7 Установите максимальное количество отображаемых номеров страниц (например, если всего 100 страниц и текущая страница 1, будут отображаться страницы 1 - 7).
disableClass 'disabled' Установите стиль «отключенного состояния» для первой страницы, предыдущей страницы, следующей страницы и последней страницы.
activeClass 'active' Установите стиль номера текущей страницы.
first (None) Установите HTML-структуру для «Первый».
prev (None) Задать HTML-структуру «Предыдущая».
Далее (None) Задать HTML-структуру «Следующая».
last (None) Задать HTML-структуру «Последняя».
page (None) Задать HTML-структуру для номеров страниц, в которой можно использовать{{page}}для обозначения текущей страницы,{{totalPages}}для обозначения общего количества страниц,{{totalCounts}}для обозначения общего количества элементов (например: Demo в «минималистичном стиле» выше использует {{placeholder}} и устанавливает visiblePages в 1, чтобы добиться этого.)
wrapper (None) HTML-обёртка для структуры пагинации, например:
, обычно не требуется.
onPageChange (None) Функция обратного вызова, вызываемая при изменении страницы (включая инициализацию первой страницы). Она получает номер «целевой страницы».

Методы расширения

jqPaginator предоставляет два метода расширения для удобной работы с компонентом после инициализации.

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

Динамически изменять конфигурацию после инициализации.

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

Уничтожить jqPaginator.

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

Связанные ресурсы