add js file and dummy ig for testing

public/js/simple-datatables.js

@@ -1,52 +1,78 @@
-let dataTable = new simpleDatatables.DataTable(
-  document.getElementById("table1")
-)
-// Move "per page dropdown" selector element out of label
-// to make it work with bootstrap 5. Add bs5 classes.
-function adaptPageDropdown() {
-  const selector = dataTable.wrapper.querySelector(".dataTable-selector")
-  selector.parentNode.parentNode.insertBefore(selector, selector.parentNode)
-  selector.classList.add("form-select")
+// Fungsi "Pabrik" untuk membuat dan mendandani tabel
+function initCustomTable(tableId) {
+    let tableElement = document.getElementById(tableId);
+
+    // Cek dulu, kalau elemen tabelnya gak ada di HTML, stop (biar ga error)
+    if (!tableElement) return;
+
+    // 1. Inisialisasi DataTable pada elemen tersebut
+    let dataTable = new simpleDatatables.DataTable(tableElement);
+
+    // --- MULAI BAGIAN STYLING BAWAAN KAMU (Moved inside function) ---
+
+    // Move "per page dropdown" selector element out of label
+    // to make it work with bootstrap 5. Add bs5 classes.
+    function adaptPageDropdown() {
+        const selector = dataTable.wrapper.querySelector(".dataTable-selector")
+        selector.parentNode.parentNode.insertBefore(selector, selector.parentNode)
+        selector.classList.add("form-select")
+    }
+
+    // Add bs5 classes to pagination elements
+    function adaptPagination() {
+        const paginations = dataTable.wrapper.querySelectorAll(
+            "ul.dataTable-pagination-list"
+        )
+
+        for (const pagination of paginations) {
+            pagination.classList.add(...["pagination", "pagination-primary"])
+        }
+
+        const paginationLis = dataTable.wrapper.querySelectorAll(
+            "ul.dataTable-pagination-list li"
+        )
+
+        for (const paginationLi of paginationLis) {
+            paginationLi.classList.add("page-item")
+        }
+
+        const paginationLinks = dataTable.wrapper.querySelectorAll(
+            "ul.dataTable-pagination-list li a"
+        )
+
+        for (const paginationLink of paginationLinks) {
+            paginationLink.classList.add("page-link")
+        }
+    }
+
+    const refreshPagination = () => {
+        adaptPagination()
+    }
+
+    // Patch "per page dropdown" and pagination after table rendered
+    dataTable.on("datatable.init", () => {
+        adaptPageDropdown()
+        refreshPagination()
+    })
+    dataTable.on("datatable.update", refreshPagination)
+    dataTable.on("datatable.sort", refreshPagination)
+
+    // Re-patch pagination after the page was changed
+    dataTable.on("datatable.page", adaptPagination)
+
+    // --- SELESAI BAGIAN STYLING ---
 }
 
-// Add bs5 classes to pagination elements
-function adaptPagination() {
-  const paginations = dataTable.wrapper.querySelectorAll(
-    "ul.dataTable-pagination-list"
-  )
+// 2. PANGGIL FUNGSI UNTUK KEDUA TABEL KAMU
+// Sesuaikan string ini dengan ID di HTML "FIX" kamu
+initCustomTable("riwayat-buket");
+initCustomTable("riwayat-foto");
+initCustomTable("table1");
 
-  for (const pagination of paginations) {
-    pagination.classList.add(...["pagination", "pagination-primary"])
-  }
 
-  const paginationLis = dataTable.wrapper.querySelectorAll(
-    "ul.dataTable-pagination-list li"
-  )
-
-  for (const paginationLi of paginationLis) {
-    paginationLi.classList.add("page-item")
-  }
-
-  const paginationLinks = dataTable.wrapper.querySelectorAll(
-    "ul.dataTable-pagination-list li a"
-  )
-
-  for (const paginationLink of paginationLinks) {
-    paginationLink.classList.add("page-link")
-  }
-}
-
-const refreshPagination = () => {
-  adaptPagination()
-}
-
-// Patch "per page dropdown" and pagination after table rendered
-dataTable.on("datatable.init", () => {
-  adaptPageDropdown()
-  refreshPagination()
-})
-dataTable.on("datatable.update", refreshPagination)
-dataTable.on("datatable.sort", refreshPagination)
-
-// Re-patch pagination after the page was changed
-dataTable.on("datatable.page", adaptPagination)
+// 3. FIX TAMBAHAN (Wajib ada biar tabel di Tab ke-2 tidak gepeng)
+document.querySelectorAll('a[data-bs-toggle="pill"]').forEach(function (triggerEl) {
+    triggerEl.addEventListener('shown.bs.tab', function (event) {
+        window.dispatchEvent(new Event('resize'));
+    });
+});