В ближайшее время существующая функция генерации постраничной навигации была преобразована в отдельный плагин jQuery. Его использование стало проще и удобнее. При использовании плагина можно просто передать некоторые параметры для включения функций или изменения эффектов отображения.
Эффект показан на рисунке ниже. Структура плагина соответствует типичной структуре плагинов jQuery, что способствует изучению разработки плагинов jQuery. Он совместим с браузерами IE7 и выше, а также с основными браузерами, такими как FireFox, Google Chrome, 360 и Qihoo 360 Secure Browser. CSS был переписан с использованием Sass/Scss, добавлены четыре варианта цветовой схемы.
Демонстрация плагина: http://www.nllive.cn/sdpagination/
Параметры ввода Таблица параметров
Таблица обратных вызовов
// Самый простой вызов, #PagerContainer1 — это div на странице
$("#PagerContainer1").sdpagination({
totalCount: 500, // Общее количество записей
pageSize: 20, // Количество записей на странице
pageIndex: 1, // Текущая страница
onPageIndexChange: function (pageIndex, pageSize) { // Обратные вызовы, при нажатии кнопки или вводе номера страницы запускается событие onPageIndexChange, параметры обратного вызова — новый номер страницы и PageSize
// Номер страницы изменился, здесь можно выполнить необходимые действия
$("#PageIndex").val(pageIndex);
$("#searchForm").submit();
}
});
// Сложный вызов, #PagerContainer3 — это div на странице
$("#PagerContainer3").sdpagination({
boxClass: "sdpagination", // Класс контейнера, созданного после добавления sdpagination-large, sdpagination-small для изменения размера, sdpagination-blue, sdpagination-green, sdpagination-orange, sdpagination-red для загрузки скинов
totalCount: 500, // Общее количество записей
pageSize: 20, // Количество записей на странице
pageIndex: 1, // Текущая страница
preText: '上页', // Символ кнопки «Предыдущая страница»
nextText: '下页', // Символ кнопки «Следующая страница»
firstText: '首页', // Символ кнопки «Первая страница»
lastText: '末页', // Символ кнопки «Последняя страница»
showNearby: 3, // Количество кнопок до и после текущей кнопки
infoTemplet: '每页{pageSize} 共{totalCount} 当前{pageIndex}/{pageCount}',// Пользовательский шаблон информации
pageList: [5, 10, 20], // Настройка параметров раскрывающегося списка PageSize
onPageIndexChange: function (pageIndex, pageSize) { // Обратные вызовы, при нажатии кнопки или вводе номера страницы запускается событие onPageIndexChange, параметры обратного вызова — новый номер страницы и PageSize
// Номер страницы изменился, здесь можно выполнить необходимые действия
$("#PageIndex").val(pageIndex);
$("#searchForm").submit();
},
onPageSizeChange: function (pageSize) { // Обратные вызовы, когда выбран параметр в раскрывающемся списке PageSize, параметр обратного вызова — новая PageSize
// Размер страницы изменился, здесь можно выполнить необходимые действия
// Обратите внимание, что значение PageSize должно отображаться в информации о разбивке на страницы, и только тогда, когда установлен обратный вызов onPageSizeChange, появится раскрывающийся список PageSize
$("#PageIndex").val(1);
$("#PageSize").val(pageSize);
$("#searchForm").submit();
},
onPageIndexOutOfRange:function(pageIndex,pageCount){// Обратные вызовы, вызываемые при pageIndex>pageCount или pageCount>0&&pageIndex=0, параметры обратного вызова — pageIndex и pageCount
// Выход за пределы pageIndex
alert('PageIndex out of Range')
}
});
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )