VGTable

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

Пагинация

Локальная пагинация строк, выбор размера страницы и дополнительные режимы навигации.

Адаптивная пагинация: xs → xxl

Измените ширину окна: до 768 px — 3 элемента страниц, от 768 px — 5, от 992 px — 7 и быстрый переход. Многоточия входят в лимит, стрелки — отдельно. Текущая страница сохраняется.

IDПроект
1Проект 1
2Проект 2
3Проект 3
4Проект 4
5Проект 5
6Проект 6
7Проект 7
8Проект 8
9Проект 9
10Проект 10
11Проект 11
12Проект 12
13Проект 13
14Проект 14
15Проект 15
16Проект 16
17Проект 17
18Проект 18
19Проект 19
20Проект 20
HTML 
<table id="pagination-responsive-table" class="vg-table vg-table-striped" data-vg-table data-group-params="pagination-responsive-demo">
  <thead><tr><th data-field="id">ID</th><th data-field="name">Проект</th></tr></thead>
  <tbody>
    <tr><td>1</td><td>Проект 1</td></tr>
    <tr><td>2</td><td>Проект 2</td></tr>
    <tr><td>3</td><td>Проект 3</td></tr>
    <tr><td>4</td><td>Проект 4</td></tr>
    <tr><td>5</td><td>Проект 5</td></tr>
    <tr><td>6</td><td>Проект 6</td></tr>
    <tr><td>7</td><td>Проект 7</td></tr>
    <tr><td>8</td><td>Проект 8</td></tr>
    <tr><td>9</td><td>Проект 9</td></tr>
    <tr><td>10</td><td>Проект 10</td></tr>
    <tr><td>11</td><td>Проект 11</td></tr>
    <tr><td>12</td><td>Проект 12</td></tr>
    <tr><td>13</td><td>Проект 13</td></tr>
    <tr><td>14</td><td>Проект 14</td></tr>
    <tr><td>15</td><td>Проект 15</td></tr>
    <tr><td>16</td><td>Проект 16</td></tr>
    <tr><td>17</td><td>Проект 17</td></tr>
    <tr><td>18</td><td>Проект 18</td></tr>
    <tr><td>19</td><td>Проект 19</td></tr>
    <tr><td>20</td><td>Проект 20</td></tr>
  </tbody>
</table>
JavaScript 
import {VGTable} from 'vgapp';

// Зарегистрируйте группу до автоматической инициализации таблиц.
VGTable.registerParamsGroup('pagination-responsive-demo', {
  pagination: {
    enabled: true, per: 1, page: 10,
    persist: {page: false, per: false},
  },
  responsive: {
    enabled: true,
    xs: {pagination: {maxButtons: 3, align: 'center', quick: {enabled: false}}},
    md: {pagination: {maxButtons: 5}},
    lg: {pagination: {maxButtons: 7, quick: {enabled: true}}},
  },
});
CSS 
/* Дополнительные стили не требуются. */

Только кнопки страниц

Минимальный режим пагинации: отображаются только кнопки перехода между страницами. Остальные элементы управления по умолчанию выключены.

ID Проект Статус
1001 Демонстрационный проект 1 Работает
1002 Демонстрационный проект 2 Проверка
1003 Демонстрационный проект 3 Планирование
1004 Демонстрационный проект 4 Работает
1005 Демонстрационный проект 5 Проверка
1006 Демонстрационный проект 6 Планирование
1007 Демонстрационный проект 7 Работает
1008 Демонстрационный проект 8 Проверка
1009 Демонстрационный проект 9 Планирование
1010 Демонстрационный проект 10 Работает
1011 Демонстрационный проект 11 Проверка
1012 Демонстрационный проект 12 Планирование
1013 Демонстрационный проект 13 Работает
1014 Демонстрационный проект 14 Проверка
1015 Демонстрационный проект 15 Планирование
1016 Демонстрационный проект 16 Работает
1017 Демонстрационный проект 17 Проверка
1018 Демонстрационный проект 18 Планирование
1019 Демонстрационный проект 19 Работает
1020 Демонстрационный проект 20 Проверка
1021 Демонстрационный проект 21 Планирование
1022 Демонстрационный проект 22 Работает
1023 Демонстрационный проект 23 Проверка
1024 Демонстрационный проект 24 Планирование
1025 Демонстрационный проект 25 Работает
1026 Демонстрационный проект 26 Проверка
1027 Демонстрационный проект 27 Планирование
1028 Демонстрационный проект 28 Работает
1029 Демонстрационный проект 29 Проверка
1030 Демонстрационный проект 30 Планирование

Базовая локальная пагинация

VGTable делит 100 находящихся в tbody строк на 10 страниц по 10 строк. Доступен выбор размера страницы, а сортировка применяется ко всему набору.

ID Проект Статус Обновлено
1001 Демонстрационный проект 1 Работает вчера
1002 Демонстрационный проект 2 Проверка 2 дня назад
1003 Демонстрационный проект 3 Планирование сегодня
1004 Демонстрационный проект 4 Работает вчера
1005 Демонстрационный проект 5 Проверка 2 дня назад
1006 Демонстрационный проект 6 Планирование сегодня
1007 Демонстрационный проект 7 Работает вчера
1008 Демонстрационный проект 8 Проверка 2 дня назад
1009 Демонстрационный проект 9 Планирование сегодня
1010 Демонстрационный проект 10 Работает вчера
1011 Демонстрационный проект 11 Проверка 2 дня назад
1012 Демонстрационный проект 12 Планирование сегодня
1013 Демонстрационный проект 13 Работает вчера
1014 Демонстрационный проект 14 Проверка 2 дня назад
1015 Демонстрационный проект 15 Планирование сегодня
1016 Демонстрационный проект 16 Работает вчера
1017 Демонстрационный проект 17 Проверка 2 дня назад
1018 Демонстрационный проект 18 Планирование сегодня
1019 Демонстрационный проект 19 Работает вчера
1020 Демонстрационный проект 20 Проверка 2 дня назад
1021 Демонстрационный проект 21 Планирование сегодня
1022 Демонстрационный проект 22 Работает вчера
1023 Демонстрационный проект 23 Проверка 2 дня назад
1024 Демонстрационный проект 24 Планирование сегодня
1025 Демонстрационный проект 25 Работает вчера
1026 Демонстрационный проект 26 Проверка 2 дня назад
1027 Демонстрационный проект 27 Планирование сегодня
1028 Демонстрационный проект 28 Работает вчера
1029 Демонстрационный проект 29 Проверка 2 дня назад
1030 Демонстрационный проект 30 Планирование сегодня
1031 Демонстрационный проект 31 Работает вчера
1032 Демонстрационный проект 32 Проверка 2 дня назад
1033 Демонстрационный проект 33 Планирование сегодня
1034 Демонстрационный проект 34 Работает вчера
1035 Демонстрационный проект 35 Проверка 2 дня назад
1036 Демонстрационный проект 36 Планирование сегодня
1037 Демонстрационный проект 37 Работает вчера
1038 Демонстрационный проект 38 Проверка 2 дня назад
1039 Демонстрационный проект 39 Планирование сегодня
1040 Демонстрационный проект 40 Работает вчера
1041 Демонстрационный проект 41 Проверка 2 дня назад
1042 Демонстрационный проект 42 Планирование сегодня
1043 Демонстрационный проект 43 Работает вчера
1044 Демонстрационный проект 44 Проверка 2 дня назад
1045 Демонстрационный проект 45 Планирование сегодня
1046 Демонстрационный проект 46 Работает вчера
1047 Демонстрационный проект 47 Проверка 2 дня назад
1048 Демонстрационный проект 48 Планирование сегодня
1049 Демонстрационный проект 49 Работает вчера
1050 Демонстрационный проект 50 Проверка 2 дня назад
1051 Демонстрационный проект 51 Планирование сегодня
1052 Демонстрационный проект 52 Работает вчера
1053 Демонстрационный проект 53 Проверка 2 дня назад
1054 Демонстрационный проект 54 Планирование сегодня
1055 Демонстрационный проект 55 Работает вчера
1056 Демонстрационный проект 56 Проверка 2 дня назад
1057 Демонстрационный проект 57 Планирование сегодня
1058 Демонстрационный проект 58 Работает вчера
1059 Демонстрационный проект 59 Проверка 2 дня назад
1060 Демонстрационный проект 60 Планирование сегодня
1061 Демонстрационный проект 61 Работает вчера
1062 Демонстрационный проект 62 Проверка 2 дня назад
1063 Демонстрационный проект 63 Планирование сегодня
1064 Демонстрационный проект 64 Работает вчера
1065 Демонстрационный проект 65 Проверка 2 дня назад
1066 Демонстрационный проект 66 Планирование сегодня
1067 Демонстрационный проект 67 Работает вчера
1068 Демонстрационный проект 68 Проверка 2 дня назад
1069 Демонстрационный проект 69 Планирование сегодня
1070 Демонстрационный проект 70 Работает вчера
1071 Демонстрационный проект 71 Проверка 2 дня назад
1072 Демонстрационный проект 72 Планирование сегодня
1073 Демонстрационный проект 73 Работает вчера
1074 Демонстрационный проект 74 Проверка 2 дня назад
1075 Демонстрационный проект 75 Планирование сегодня
1076 Демонстрационный проект 76 Работает вчера
1077 Демонстрационный проект 77 Проверка 2 дня назад
1078 Демонстрационный проект 78 Планирование сегодня
1079 Демонстрационный проект 79 Работает вчера
1080 Демонстрационный проект 80 Проверка 2 дня назад
1081 Демонстрационный проект 81 Планирование сегодня
1082 Демонстрационный проект 82 Работает вчера
1083 Демонстрационный проект 83 Проверка 2 дня назад
1084 Демонстрационный проект 84 Планирование сегодня
1085 Демонстрационный проект 85 Работает вчера
1086 Демонстрационный проект 86 Проверка 2 дня назад
1087 Демонстрационный проект 87 Планирование сегодня
1088 Демонстрационный проект 88 Работает вчера
1089 Демонстрационный проект 89 Проверка 2 дня назад
1090 Демонстрационный проект 90 Планирование сегодня
1091 Демонстрационный проект 91 Работает вчера
1092 Демонстрационный проект 92 Проверка 2 дня назад
1093 Демонстрационный проект 93 Планирование сегодня
1094 Демонстрационный проект 94 Работает вчера
1095 Демонстрационный проект 95 Проверка 2 дня назад
1096 Демонстрационный проект 96 Планирование сегодня
1097 Демонстрационный проект 97 Работает вчера
1098 Демонстрационный проект 98 Проверка 2 дня назад
1099 Демонстрационный проект 99 Планирование сегодня
1100 Демонстрационный проект 100 Работает вчера
HTML 
<div class="vg-table-wrapper">
  <table
    class="vg-table vg-table-striped vg-table-hovered"
    data-vg-table
    data-pagination-enable="true"
    data-pagination-per-page="10"
	data-pagination-show-per-page-label="true"
    data-pagination-position="bottom"
    data-pagination-align="between"
  >
    <!-- thead и tbody -->
  </table>
</div>

Пагинатор сверху и снизу

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

ID Проект Статус
1001 Демонстрационный проект 1 Работает
1002 Демонстрационный проект 2 Проверка
1003 Демонстрационный проект 3 Планирование
1004 Демонстрационный проект 4 Работает
1005 Демонстрационный проект 5 Проверка
1006 Демонстрационный проект 6 Планирование
1007 Демонстрационный проект 7 Работает
1008 Демонстрационный проект 8 Проверка
1009 Демонстрационный проект 9 Планирование
1010 Демонстрационный проект 10 Работает
1011 Демонстрационный проект 11 Проверка
1012 Демонстрационный проект 12 Планирование
HTML 
<table
  class="vg-table vg-table-hovered"
  id="projects-pagination"
  data-vg-table
  data-pagination-enable="true"
  data-pagination-per-page="2"
  data-pagination-position="both"
  data-pagination-align="center"
	data-pagination-show-per-page="true"
  data-pagination-ellipsis="true"
  data-pagination-ellipsis-after="4"
  data-pagination-max-visible-pages="3"
  data-pagination-quick-jump="true"
  data-pagination-persist-page="true"
  data-pagination-persist-per-page="true"
  data-pagination-storage-key="demo:projects:pagination"
>
  <!-- thead и tbody -->
</table>
JavaScript 
import {VGTable} from 'vgapp';

const table = document.querySelector('#projects-pagination');
const instance = VGTable.getInstance(table)
  || VGTable.getOrCreateInstance(table).init();

instance.setPage(3);
instance.setPerPage(10);
console.log(instance.getPagination());

table.addEventListener('pagechange.vg.table', (event) => {
  console.log(event.detail.page, event.detail.perPage);
});

table.addEventListener('perpagechange.vg.table', (event) => {
  console.log(event.detail);
});