Постраничная навигация в jqGrid

Цикл статей «Документация jqGrid на русском».

Следующая статья — «Навигатор в jqGrid».
Предыдущая статья — «JqGrid. Сортировка на клиенте, но постраничная навигация на сервере».

Если в вашей таблице небольшое количество строк, то тогда все записи будут видны, и вы не будете беспокоиться о навигации по страницам данных.

Но гораздо более вероятно то, что  вы будете работать с большими множествами данных, и что вы захотите отображать лишь небольшое количество записей в один момент времени. Для этого вам нужно воспользоваться панелью постраничной навигации.

Постраничная навигация сейчас не работает в TreeGrid.

Определение постраничной навигации в jqGrid

Для включения постраничной навигации вам нужно расположить элемент <div> сразу после определения <table> в вашем HTML. Обратите внимание, что это <div>, а не <table> После этого передайте id этого <div> в настройки вашей таблицы в свойство "pager"

Во-первых, определение в HTML. Мы дадим ему id "gridpager" :

Затем мы передадим этот id в настройки нашей таблицы:

Нет необходимости указывать какой-либо класс в pager-е. Нет необходимости указывать какой-либо класс в элементе table.

Указание div-а для постраничной навигации в таблице может быть выполнено следующими способами: pager : '#gridpager' ,  pager : 'gridpager'  или pager : jQuery('#gridpager') . Все три способа корректны, но рекомендуется использовать первый способ или второй способ, так как вариант с jQuery станет причиной проблем, когда вы будете использовать модули импорта и экспорта.

Определение панели навигации в свойствах jqGrid указывает, что она должна быть частью таблицы, и ширина панели навигации должна быть равна ширине таблицы. В этом случае панель навигации будет расположена под таблицей. Заметьте, что в этом случае элемент постраничной навигации может иметь произвольную позицию в документе и будет расположен вместо этого над таблицей.

Если вы хотите иметь особую, пользовательскую панель навигации, то вы можете определить её по-своему и не указывать в свойствах таблицы.

Панель постраничной навигации, если определена, использует переменные из языкового файла. Английский вариант этих свойств выглядит так (файл grid.locale-en.js):

Вы можете изменить эти свойства так, как вам нужно.

1. Если вы хотите сделать изменения глобально, то есть чтобы ваши изменения действовали на все таблицы, то вы можете сделать:

Вы можете сохранить этот код в файле и загружать этот файл после загрузки файлов, необходимых jqGrid.

2. Если вы хотите поменять это только для одной таблицы, то вы можете сделать:

Обычно постраничную навигацию делают так, чтобы она отображалась под таблицей. Дубликат панели постраничной навигации может быть также добавлен перед таблицей.

По умолчанию  элементы постраничной навигации располагаются по центру и информация о записях справа в панели постраничной навигации. Вы можете изменить эти позиции с помощью свойств pagerpos и recordpos. Смотрите ниже.

На текущий момент иконки, которые изображают кнопки постраничной навигации жёстко прошиты, и вы можете использовать иконки темы jQuery UI для этих целей.

Свойства постраничной навигации в jqGrid

Свойство: lastpage
Тип: integer
Только для чтения. Определяет общее количество страниц, возвращённое с сервера.
По умолчанию: 0
Можно менять: нет

Свойство: pager
Тип: смешанный
Указывает, что мы хотим использовать панель навигации для перехода между записями. Это должен быть корректный HTML-элемент. В нашем примере мы давали элементу div идентификатор id= "pager", но любое имя допустимо. Обратите внимание, что панель навигации (div "pager") может быть расположена в любом месте HTML-документа. В нашем примере мы указали, что панель навигации будет находится после тела таблицы. Корректные значения для нашего примера могут быть: 'pager' , '#pager' , jQuery('#pager') . Рекомендуется использовать второй способ.
По умолчанию: пустая строка. На текущий момент только одна панель навигации возможна.
Можно менять: нет

Свойство: pagerpos
Тип: string
Определяет позицию панели постраничной навигации в таблице. По умолчанию панель делится на три части (одна часть для перемещения по записям, одна часть для кнопок навигации и одна часть для информации о записях).
По умолчанию: center
Можно менять: нет

Свойство: pgbuttons
Тип: boolean
Определяет, показывать ли кнопки постраничной навигации, если панель постраничной навигации есть. Действует только в случае корректного указания свойства pager. Кнопки добавляются в панель навигации.
По умолчанию: true
Можно менять: нет

Свойство: pginput
Тип: boolean
Показывать ли элемент ввода, где пользователь может выбрать номер запрашиваемой страницы. Элемент ввода появляется в панели постраничной навигации.
По умолчанию: true
Можно менять: нет

Свойство: pgtext
Тип: string
Показывает информацию о страницах. Первое значение — текущая загруженная страница. Второе значение — общее количество страниц.
По умолчанию: смотрите файл локализации
Можно менять: да

Свойство: reccount
Тип: integer
Только для чтения. Определяет точное количество строк в таблице. Не путайте со свойством records. Не смотря на то что в большинстве случаев они равны, есть ситуации, когда это не так. Например, мы определяем свойство rowNum = 15, но с сервера возвращаем records = 20, тогда свойство records будет равно 20, но свойство reccount будет равно 15, и в таблице будет 15 записей.
По умолчанию: 0
Можно менять: нет

Свойство: recordpos
Тип: string
Определяет расположение информации о записях в панели постраничной навигации. Может быть "left" , "center" , "right".
По умолчанию: right
Можно менять: нет

Свойство: records
Тип: integer
Только для чтения. Определяет количество записей, возвращённых с сервера.
По умолчанию: none
Можно менять: нет

Свойство: recordtext
Тип: string
Информация, которая может отображаться в панели постраничной навигации. Это свойство имеет смысл только в случае, когда свойство viewrecords установлено в true. Этот текст появляется только в случае, когда общее количество записей больше 0. Чтобы показывать или скрывать некоторую информацию, элементы в {} означают следующее: {0} — начальная позиция записей в зависимости от номера страницы и количества запрошенных записей, {1} — конечная позиция; {2} — общее количество записей.
По умолчанию: смотрите языковый файл
Можно менять: да

Свойство: rowList
Тип: array[]
Массив для построения элемента select в панели постраничной навигации, в котором пользователь может выбрать количество отображаемых записей. При выборе во время выполнения, выбранное значение заменяет свойство rowNum, передаваемое в url. Если массив пуст, то элемент не отображается. Обычно это свойство устанавливают как что-то вроде такого: [10,20,30]. Если свойство rowNum установлено в 30, то select-е будет выбрано значение 30.
По умолчанию: empty array — []
Можно менять: нет

Свойство: rowNum
Тип: integer
Какое количество записей мы хотим видеть в таблице. Это свойство передаётся в url для использования на стороне сервера при выборке данных.
По умолчанию: 20
Можно менять: да

Свойство: viewrecords
Тип: boolean
Хотим ли мы отображать общее количество записей из запроса в панели навигации.
По умолчанию: false
Можно менять: нет

Все свойства, которые могут быть изменены в панели постраничной навигации после создания объекта jqGrid, требуют перезагрузки таблицы. Это делается с помощью trigger("reloadGrid"). Вот пример смены количества запрашиваемых записей на 10:

События постраничной навигации в jqGrid

Одно событие, связанное с панелью постраничной навигации:

Событие: onPaging
Параметры: pgButton
Это событие возникает после клика на кнопки постраничной навигации и после формирования данных. Также работает при вводе пользователем нового номера страницы в input box (и нажатии «Ввод»), и когда количество запрашиваемых записей меняется с помощью элемента select. В это событие передаётся только один параметр pgButton (string), который может быть одним из значений: "first", "last", "prev" , "next" — в случае клика, "records" — в случае смены количества запрашиваемых записей или в случае смены номера запрашиваемой страницы. Если строка "stop" вернётся из функции, то постраничная навигация будет остановлена.

 

Новые слова:
arbitrary [ˈɑːbɪtrərɪ] — произвольный, случайный

Цикл статей «Документация jqGrid на русском».

Следующая статья — «Навигатор в jqGrid».
Предыдущая статья — «JqGrid. Сортировка на клиенте, но постраничная навигация на сервере».

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *