VGTable

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

Remote режим

Загрузка строк с сервера, серверная пагинация, сортировка, cache и режимы data/view/auto.

JSON-данные

VGTable показывает skeleton с сохранением геометрии, запрашивает текущую страницу и передаёт серверу page, per_page, sort, dir и responsemode. В endpoint находится 100 записей.

ID Название Категория Статус Обновлено
HTML
<table
  class="vg-table vg-table-hovered"
  data-vg-table
  data-request-route="/api/table/remote"
  data-request-responsemode="data"
  data-loading-min-delay="500"
  data-loading-skeleton-rows="5"
  data-pagination-enable="true"
  data-pagination-per-page="10"
  data-pagination-show-per-page="true"
>
  <thead>
    <tr>
      <th data-field="id" data-sort-type="number">ID</th>
      <th data-field="name">Название</th>
      <th data-field="category">Категория</th>
      <th data-field="status">Статус</th>
      <th data-field="updated" data-sort-type="date">Обновлено</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Готовая разметка строк

В режиме view сервер возвращает view.tbody. Поэтому в строках можно использовать badges, ссылки, кнопки и другую Blade-разметку без клиентского шаблонизатора. Повторный одинаковый запрос берётся из cache экземпляра.

ID Название Категория Статус Обновлено
HTML
<table
  class="vg-table vg-table-striped vg-table-hovered"
  data-vg-table
  data-request-route="/api/table/remote"
  data-request-responsemode="view"
  data-request-viewpath="view.tbody"
  data-loading-min-delay="500"
  data-loading-skeleton-rows="5"
  data-request-cache-enable="true"
  data-request-cache-ttl="30000"
  data-request-cache-max="30"
  data-pagination-enable="true"
  data-pagination-per-page="10"
>
  <thead>...</thead>
  <tbody></tbody>
</table>