jQuery EasyUI Базовый плагин -Pagination

jQuery EasyUI 插件Плагин jQuery EasyUI

Переопределите значения по умолчанию через $.fn.pagination.defaults.

Pagination позволяет пользователям перемещаться по данным с помощью постраничной навигации. Он поддерживает настраиваемые параметры для навигации по страницам и выбора длины страницы. Пользователи могут добавлять собственные кнопки в правую часть пагинации для расширения функциональности.

Зависимости

  • linkbutton

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

Создайте пагинацию с помощью разметки.

<div id="pp" class="easyui-pagination" style="background:#EFEFEF;border:1px solid #ccc;"
    data-options="total:2000,pageSize:10">
</div>

Создайте пагинацию с помощью JavaScript.

<div id="pp" style="background:#EFEFEF;border:1px solid #ccc;"></div>

$('#pp').pagination({
    total:2000,
    pageSize:10
});

Давайте создадим AJAX-пагинацию с использованием плагинов panel и pagination. Когда пользователь выбирает новую страницу, panel отобразит соответствующее содержимое указанной страницы.

<div id="content" class="easyui-panel" style="height:200px"
    data-options="href:'show_content.php?page=1'">
</div>
<div class="easyui-pagination" style="border:1px solid #ccc;"
    data-options="
    total: 2000,
    pageSize: 10,
    onSelectPage: function(pageNumber, pageSize){
    $('#content').panel('refresh', 'show_content.php?page='+pageNumber);
    }">
</div>

panel в верхней части по умолчанию отображает содержимое первой страницы. Когда пользователь переходит по страницам, будет вызвано событие 'onSelectPage', которое вызывает метод 'refresh' у панели содержимого для загрузки содержимого новой страницы с новым параметром URL.

Свойства

Name Type Описание Значение по умолчанию
total число Общее количество записей следует задать при создании pagination. 1
pageSize число Размер страницы. (Примечание: максимальное количество записей, отображаемых на странице) 10
pageNumber число Номер страницы для отображения при создании pagination. 1
pageList array Пользователи могут изменять размер страницы. Свойство pageList определяет, на какие размеры можно изменять.
Пример кода:
$('#pp').pagination({
    pageList: [10,20,50,100]
});
[10,20,30,50]
loading логическое значение Определяет, загружаются ли данные. false
buttons массив, селектор Определяет пользовательские кнопки, возможные значения:
1. Массив, каждая кнопка содержит два свойства:
iconCls: CSS-класс, он будет отображать фоновое изображение
handler: функция-обработчик при нажатии кнопки
2. Селектор, указывающий на кнопку.

Кнопки можно объявить через разметку:
<div class="easyui-pagination" style="border:1px solid #ccc" data-options="
        total: 114,
        buttons: [{
            iconCls:'icon-add',
            handler:function(){alert('add')}
        },'-',{
            iconCls:'icon-save',
            handler:function(){alert('save')}
        }]">
</div>
Кнопки также можно создать с помощью JavaScript:
$('#pp').pagination({
    total: 114,
    buttons: [{
        iconCls:'icon-add',
        handler:function(){alert('add')}
    },'-',{
        iconCls:'icon-save',
        handler:function(){alert('save')}
    }]
});
null
layout array Определение макета пагинации. Это свойство доступно начиная с версии 1.3.5.
Элементы макета включают одно или несколько из следующих значений:
1. list: список размеров страницы.
2. sep: разделитель кнопок страниц.
3. first: первая кнопка.
4. prev: кнопка предыдущей.
5. next: кнопка следующей.
6. last: последняя кнопка.
7. refresh: кнопка обновления.
8. manual: поле ручного ввода номера страницы, позволяющее вводить номера страниц.
9. links: ссылки на номера страниц.

Пример кода:
$('#pp').pagination({
    layout:['first','links','last']
});
links число Количество ссылок, действительно только когда элемент 'links' включён в 'layout'. Это свойство доступно начиная с версии 1.3.5. 10
showPageList логическое значение Определяет, отображать ли список страниц. истина
showRefresh логическое значение Определяет, отображать ли кнопку обновления. истина
beforePageText string Отображает метку перед компонентом ввода. Page
afterPageText string Отображает метку после компонента ввода. из {pages}
displayMsg string Отображает информацию о странице. Отображает информацию о странице с {from} по {to} из {total}.

Events

Name Parameters Описание
onSelectPage pageNumber, pageSize Срабатывает, когда пользователь выбирает новую страницу. Функция обратного вызова содержит два параметра:
pageNumber: новый номер страницы
pageSize: новый размер страницы

Пример кода:
$('#pp').pagination({
    onSelectPage:function(pageNumber, pageSize){
        $(this).pagination('loading');
        alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
        $(this).pagination('loaded');
    }
});
onBeforeRefresh pageNumber, pageSize Срабатывает перед нажатием кнопки обновления; верните false, чтобы отменить действие обновления.
onRefresh pageNumber, pageSize Срабатывает после обновления.
onChangePageSize pageSize Срабатывает, когда пользователь изменяет размер страницы.

Методы

Name Parameters Описание
options none Возвращает объект options.
loading none Переводит пагинацию в состояние загрузки.
loaded none Переводит пагинацию в состояние загружено.
refresh options Обновляет и отображает информацию о пагинации. Этот метод доступен начиная с версии 1.3.
Пример кода:
$('#pp').pagination('refresh');    // 刷新分页栏信息
$('#pp').pagination('refresh',{    // 改变选项，并刷新分页栏信息
    total: 114,
    pageNumber: 6
});
select page Выберите новую страницу. Индекс страницы начинается с 1. Этот метод доступен начиная с версии 1.3.
Пример кода:
$('#pp').pagination('select');    // 刷新当前页面
$('#pp').pagination('select', 2);    // 选择第二页
jQuery EasyUI 插件jQuery EasyUI Plugin Другие расширения