Много разных изменений

frontend/admin/js/pagination.js

@@ -0,0 +1,34 @@
+import { escapeHtml } from './utils.js';
+
+export function renderPagination(container, pageData, { onPage, onSize, label = 'записей' } = {}) {
+    if (!container) return;
+    const totalItems = Number(pageData?.totalItems || 0);
+    const page = Number(pageData?.page || 0);
+    const size = Number(pageData?.size || 25);
+    const totalPages = Math.max(Number(pageData?.totalPages || 0), totalItems ? 1 : 0);
+    const start = totalItems ? page * size + 1 : 0;
+    const end = Math.min((page + 1) * size, totalItems);
+
+    container.innerHTML = `
+        <div class="pagination-summary" aria-live="polite">
+            Показано ${start}–${end} из ${totalItems} ${escapeHtml(label)}
+        </div>
+        <div class="pagination-actions">
+            <label class="pagination-size">
+                <span>На странице</span>
+                <select data-pagination-size data-native-select="true">
+                    ${[25, 50, 100].map(value => `<option value="${value}" ${value === size ? 'selected' : ''}>${value}</option>`).join('')}
+                </select>
+            </label>
+            <button type="button" class="btn btn-sm btn-secondary" data-pagination-page="${page - 1}" ${page <= 0 ? 'disabled' : ''}>Назад</button>
+            <span class="pagination-page">${totalPages ? page + 1 : 0} / ${totalPages}</span>
+            <button type="button" class="btn btn-sm btn-secondary" data-pagination-page="${page + 1}" ${page >= totalPages - 1 ? 'disabled' : ''}>Далее</button>
+        </div>
+    `;
+    container.querySelectorAll('[data-pagination-page]').forEach(button => {
+        button.addEventListener('click', () => onPage?.(Number(button.dataset.paginationPage)));
+    });
+    container.querySelector('[data-pagination-size]')?.addEventListener('change', event => {
+        onSize?.(Number(event.target.value));
+    });
+}