VGTable

Динамические таблицы

URL state

Единая синхронизация страницы, размера, сортировки, поиска и фильтров с query string.

Общий URL state

Страница, размер, сортировка, поиск и фильтры записываются в один query string. Ссылку можно скопировать, а back/forward восстанавливает контролы и выполняет один Remote-запрос.

ID Название Категория Статус Приоритет

Поиск и фильтры

HTML 
<form id="vg-table-url-filters">
  <input id="vg-table-url-search" type="search">
  <select data-filter-field="status">...</select>
</form>

<table id="vg-table-url-state" class="vg-table" data-vg-table data-group-params="url-state-demo">
  <thead>...</thead>
  <tbody></tbody>
</table>
JavaScript 
VGTable.registerParamsGroup('url-state-demo', {
  request: {route: '/api/table/remote', cache: {enable: false}},
  search: {enabled: true, input: '#vg-table-url-search', param: 'q'},
  filters: {enabled: true, form: '#vg-table-url-filters'},
  pagination: {enabled: true, per: 10, size: {enabled: true}},
  urlState: {
    enabled: true,
    mode: 'replace',
    // Ключи по умолчанию:
    // page, perPage, sort, dir, search, filter-*
  },
});
CSS 
/* Дополнительные стили VGTable не требуются.
   Панель фильтров — внешняя композиция страницы. */