VGTable
Динамические таблицы
Фильтры
Глобальный поиск и автоматическая фильтрация локальных и Remote-таблиц через общую внешнюю форму.
Локальная фильтрация
Глобальный поиск и точные фильтры применяются к уже загруженным строкам. Их условия объединяются, а пагинация автоматически пересчитывает результат.
| ID | Название | Категория | Статус | Приоритет |
|---|---|---|---|---|
| 1 | Локальная запись 001 | Раздел 1 | Активен | Нет |
| 2 | Локальная запись 002 | Раздел 2 | На проверке | Нет |
| 3 | Локальная запись 003 | Раздел 3 | Приостановлен | Нет |
| 4 | Локальная запись 004 | Раздел 4 | Активен | Нет |
| 5 | Локальная запись 005 | Раздел 1 | На проверке | Да |
| 6 | Локальная запись 006 | Раздел 2 | Приостановлен | Нет |
| 7 | Локальная запись 007 | Раздел 3 | Активен | Нет |
| 8 | Локальная запись 008 | Раздел 4 | На проверке | Нет |
| 9 | Локальная запись 009 | Раздел 1 | Приостановлен | Нет |
| 10 | Локальная запись 010 | Раздел 2 | Активен | Да |
| 11 | Локальная запись 011 | Раздел 3 | На проверке | Нет |
| 12 | Локальная запись 012 | Раздел 4 | Приостановлен | Нет |
| 13 | Локальная запись 013 | Раздел 1 | Активен | Нет |
| 14 | Локальная запись 014 | Раздел 2 | На проверке | Нет |
| 15 | Локальная запись 015 | Раздел 3 | Приостановлен | Да |
| 16 | Локальная запись 016 | Раздел 4 | Активен | Нет |
| 17 | Локальная запись 017 | Раздел 1 | На проверке | Нет |
| 18 | Локальная запись 018 | Раздел 2 | Приостановлен | Нет |
| 19 | Локальная запись 019 | Раздел 3 | Активен | Нет |
| 20 | Локальная запись 020 | Раздел 4 | На проверке | Да |
| 21 | Локальная запись 021 | Раздел 1 | Приостановлен | Нет |
| 22 | Локальная запись 022 | Раздел 2 | Активен | Нет |
| 23 | Локальная запись 023 | Раздел 3 | На проверке | Нет |
| 24 | Локальная запись 024 | Раздел 4 | Приостановлен | Нет |
| 25 | Локальная запись 025 | Раздел 1 | Активен | Да |
| 26 | Локальная запись 026 | Раздел 2 | На проверке | Нет |
| 27 | Локальная запись 027 | Раздел 3 | Приостановлен | Нет |
| 28 | Локальная запись 028 | Раздел 4 | Активен | Нет |
| 29 | Локальная запись 029 | Раздел 1 | На проверке | Нет |
| 30 | Локальная запись 030 | Раздел 2 | Приостановлен | Да |
| 31 | Локальная запись 031 | Раздел 3 | Активен | Нет |
| 32 | Локальная запись 032 | Раздел 4 | На проверке | Нет |
| 33 | Локальная запись 033 | Раздел 1 | Приостановлен | Нет |
| 34 | Локальная запись 034 | Раздел 2 | Активен | Нет |
| 35 | Локальная запись 035 | Раздел 3 | На проверке | Да |
| 36 | Локальная запись 036 | Раздел 4 | Приостановлен | Нет |
| 37 | Локальная запись 037 | Раздел 1 | Активен | Нет |
| 38 | Локальная запись 038 | Раздел 2 | На проверке | Нет |
| 39 | Локальная запись 039 | Раздел 3 | Приостановлен | Нет |
| 40 | Локальная запись 040 | Раздел 4 | Активен | Да |
HTML
<form id="vg-table-local-filters">
<input id="vg-table-local-search" class="form-control form-sm" type="search" placeholder="Поиск по всем колонкам">
<input data-filter-field="name" data-filter-operator="contains">
<select data-filter-field="status">...</select>
<input type="checkbox" value="1" data-filter-field="priority">
<button type="button" data-filter-reset>Сбросить</button>
</form>
<table class="vg-table" data-vg-table data-group-params="filters-local-demo">
...
</table>Фильтрация Remote-таблицы
Глобальный поиск отправляется как q, а точные фильтры — отдельными параметрами. Select и switch применяются сразу, текстовые поля используют debounce 250 мс.
| ID | Название | Категория | Статус | Приоритет |
|---|
HTML
<form id="vg-table-remote-filters">
<input id="vg-table-remote-search" class="form-control form-sm" type="search" placeholder="Remote поиск">
<input data-filter-field="name" data-filter-operator="contains">
<select data-filter-field="category">...</select>
<select data-filter-field="status">...</select>
<input type="checkbox" value="1" data-filter-field="priority">
</form>
<table class="vg-table" data-vg-table data-group-params="filters-remote-demo">
<thead>...</thead>
<tbody></tbody>
</table>
JAVASCRIPT
VGTable.registerParamsGroup('filters-local-demo', {
search: {
enabled: true,
input: '#vg-table-local-search',
debounce: 250,
},
filters: {
enabled: true,
form: '#vg-table-local-filters',
},
pagination: {enabled: true, per: 10},
});
VGTable.registerParamsGroup('filters-remote-demo', {
request: {
route: '/api/table/remote',
responsemode: 'data',
cache: {enable: false},
},
loading: {
minDelay: 500,
skeleton: 5,
},
search: {
enabled: true,
input: '#vg-table-remote-search',
param: 'q',
debounce: 250,
resetPage: true,
},
filters: {
enabled: true,
form: '#vg-table-remote-filters',
apply: 'auto',
debounce: 250,
resetPage: true,
url: {enabled: true, prefix: 'filter-'},
},
pagination: {
enabled: true,
per: 10,
size: {enabled: true},
},
});