Цикл статей «Документация jqGrid на русском».
Следующая статья — «Навигатор в jqGrid».
Предыдущая статья — «JqGrid. Сортировка на клиенте, но постраничная навигация на сервере».
Если в вашей таблице небольшое количество строк, то тогда все записи будут видны, и вы не будете беспокоиться о навигации по страницам данных.
Но гораздо более вероятно то, что вы будете работать с большими множествами данных, и что вы захотите отображать лишь небольшое количество записей в один момент времени. Для этого вам нужно воспользоваться панелью постраничной навигации.
Постраничная навигация сейчас не работает в TreeGrid.
Определение постраничной навигации в jqGrid
Для включения постраничной навигации вам нужно расположить элемент <div> сразу после определения <table> в вашем HTML. Обратите внимание, что это <div>, а не <table> После этого передайте id этого <div> в настройки вашей таблицы в свойство "pager"
Во-первых, определение в HTML. Мы дадим ему id "gridpager" :
1 2 3 4 5 6 7 |
... <body> ... <table id="list"></table> <div id="gridpager"></div> ... </body> |
Затем мы передадим этот id в настройки нашей таблицы:
1 2 3 4 5 |
jQuery("#grid_id").jqGrid({ ... pager : '#gridpager', ... }); |
Нет необходимости указывать какой-либо класс в pager-е. Нет необходимости указывать какой-либо класс в элементе table.
Указание div-а для постраничной навигации в таблице может быть выполнено следующими способами: pager : '#gridpager' , pager : 'gridpager' или pager : jQuery('#gridpager') . Все три способа корректны, но рекомендуется использовать первый способ или второй способ, так как вариант с jQuery станет причиной проблем, когда вы будете использовать модули импорта и экспорта.
Определение панели навигации в свойствах jqGrid указывает, что она должна быть частью таблицы, и ширина панели навигации должна быть равна ширине таблицы. В этом случае панель навигации будет расположена под таблицей. Заметьте, что в этом случае элемент постраничной навигации может иметь произвольную позицию в документе и будет расположен вместо этого над таблицей.
Если вы хотите иметь особую, пользовательскую панель навигации, то вы можете определить её по-своему и не указывать в свойствах таблицы.
Панель постраничной навигации, если определена, использует переменные из языкового файла. Английский вариант этих свойств выглядит так (файл grid.locale-en.js):
1 2 3 4 5 6 7 8 9 |
$.jgrid = { defaults : { recordtext: "View {0} - {1} of {2}", emptyrecords: "No records to view", loadtext: "Loading...", pgtext : "Page {0} of {1}" }, ... } |
Вы можете изменить эти свойства так, как вам нужно.
1. Если вы хотите сделать изменения глобально, то есть чтобы ваши изменения действовали на все таблицы, то вы можете сделать:
1 |
jQuery.extend(jQuery.jgrid.defaults,{emptyrecords: "Nothing to display",...}); |
Вы можете сохранить этот код в файле и загружать этот файл после загрузки файлов, необходимых jqGrid.
2. Если вы хотите поменять это только для одной таблицы, то вы можете сделать:
1 2 3 4 5 6 |
jQuery("#grid_id").jqGrid({ ... pager : '#gridpager', emptyrecords: "Nothing to display", ... }); |
Обычно постраничную навигацию делают так, чтобы она отображалась под таблицей. Дубликат панели постраничной навигации может быть также добавлен перед таблицей.
По умолчанию элементы постраничной навигации располагаются по центру и информация о записях справа в панели постраничной навигации. Вы можете изменить эти позиции с помощью свойств 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:
1 2 3 4 5 |
<script> ... jQuery("#grid_id").setGridParam({rowNum:10}).trigger("reloadGrid"); ... </script> |
События постраничной навигации в jqGrid
Одно событие, связанное с панелью постраничной навигации:
Событие: onPaging
Параметры: pgButton
Это событие возникает после клика на кнопки постраничной навигации и после формирования данных. Также работает при вводе пользователем нового номера страницы в input box (и нажатии «Ввод»), и когда количество запрашиваемых записей меняется с помощью элемента select. В это событие передаётся только один параметр pgButton (string), который может быть одним из значений:
"first",
"last",
"prev" ,
"next" — в случае клика,
"records" — в случае смены количества запрашиваемых записей или в случае смены номера запрашиваемой страницы. Если строка
"stop" вернётся из функции, то постраничная навигация будет остановлена.
Новые слова:
arbitrary [ˈɑːbɪtrərɪ] — произвольный, случайный
Цикл статей «Документация jqGrid на русском».
Следующая статья — «Навигатор в jqGrid».
Предыдущая статья — «JqGrid. Сортировка на клиенте, но постраничная навигация на сервере».