https://aegnord.de/js/utils/table-pagination.js

1/**
2 * Table Pagination Utility
3 * Wiederverwendbare Pagination für Admin Management-Tabellen
4 */
5const TablePagination = {
6
7  /**
8   * Daten paginieren
9   * @param {Array} data - Vollständiges Daten-Array
10   * @param {number} page - Aktuelle Seite (1-basiert)
11   * @param {number} pageSize - Einträge pro Seite (0 = alle)
12   * @returns {Array} Paginierte Daten
13   */
14  paginate(data, page, pageSize) {
15    if (!pageSize || pageSize <= 0) return data;
16    const start = (page - 1) * pageSize;
17    return data.slice(start, start + pageSize);
18  },
19
20  /**
21   * Pagination Controls HTML rendern
22   * @param {number} totalItems - Gesamtanzahl der Einträge
23   * @param {number} currentPage - Aktuelle Seite
24   * @param {number} pageSize - Einträge pro Seite (0 = alle)
25   * @returns {string} HTML-String
26   */
27  render(totalItems, currentPage, pageSize) {
28    const totalPages = pageSize > 0 ? Math.ceil(totalItems / pageSize) : 1;
29    const sizes = [10, 25, 50];
30
31    return `
32      <div class="tbl-pagination flex flex-col sm:flex-row justify-between items-center gap-3 py-3 px-1 text-sm text-gray-600">
33        <div class="flex items-center gap-2">
34          <span>Anzeigen:</span>
35          ${sizes.map(s => `
36            <button class="pg-size-btn px-2 py-0.5 rounded-sm border text-xs ${pageSize === s ? 'bg-[#2D4B9B] text-white border-[#2D4B9B]' : 'border-gray-300 hover:bg-gray-100'}" data-size="${s}">${s}</button>
37          `).join('')}
38          <button class="pg-size-btn px-2 py-0.5 rounded-sm border text-xs ${!pageSize || pageSize <= 0 ? 'bg-[#2D4B9B] text-white border-[#2D4B9B]' : 'border-gray-300 hover:bg-gray-100'}" data-size="0">Alle</button>
39          <span class="ml-2 text-gray-400">|</span>
40          <span class="text-gray-500">Gesamt: <strong class="text-gray-700">${totalItems}</strong></span>
41        </div>
42        ${totalPages > 1 ? `
43        <div class="flex items-center gap-1">
44          <button class="pg-prev px-2 py-0.5 rounded-sm border border-gray-300 text-xs ${currentPage <= 1 ? 'opacity-40 cursor-not-allowed' : 'hover:bg-gray-100 cursor-pointer'}" ${currentPage <= 1 ? 'disabled' : ''} aria-label="Vorherige Seite">&laquo;</button>
45          <span class="px-2 text-xs">Seite <strong>${currentPage}</strong> / <strong>${totalPages}</strong></span>
46          <button class="pg-next px-2 py-0.5 rounded-sm border border-gray-300 text-xs ${currentPage >= totalPages ? 'opacity-40 cursor-not-allowed' : 'hover:bg-gray-100 cursor-pointer'}" ${currentPage >= totalPages ? 'disabled' : ''} aria-label="Nächste Seite">&raquo;</button>
47        </div>
48        ` : ''}
49      </div>
50    `;
51  },
52
53  /**
54   * Event Handlers für Pagination initialisieren
55   * @param {HTMLElement} container - Container-Element das .tbl-pagination enthält
56   * @param {number} totalItems - Gesamtanzahl
57   * @param {number} currentPage - Aktuelle Seite
58   * @param {number} pageSize - Einträge pro Seite
59   * @param {Function} onPageChange - Callback(page, pageSize)
60   */
61  init(container, totalItems, currentPage, pageSize, onPageChange) {
62    if (!container) return;
63
64    const totalPages = pageSize > 0 ? Math.ceil(totalItems / pageSize) : 1;
65
66    container.querySelectorAll('.pg-size-btn').forEach(btn => {
67      btn.addEventListener('click', () => {
68        const newSize = parseInt(btn.dataset.size);
69        onPageChange(1, newSize);
70      });
71    });
72
73    const prevBtn = container.querySelector('.pg-prev');
74    if (prevBtn && !prevBtn.disabled) {
75      prevBtn.addEventListener('click', () => onPageChange(currentPage - 1, pageSize));
76    }
77
78    const nextBtn = container.querySelector('.pg-next');
79    if (nextBtn && !nextBtn.disabled) {
80      nextBtn.addEventListener('click', () => onPageChange(currentPage + 1, pageSize));
81    }
82  }
83};
84
85window.TablePagination = TablePagination;