79 lines
2.6 KiB
JavaScript
79 lines
2.6 KiB
JavaScript
// 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 ---
|
|
}
|
|
|
|
// 2. PANGGIL FUNGSI UNTUK KEDUA TABEL KAMU
|
|
// Sesuaikan string ini dengan ID di HTML "FIX" kamu
|
|
initCustomTable("riwayat-buket");
|
|
initCustomTable("riwayat-foto");
|
|
initCustomTable("table1");
|
|
|
|
|
|
// 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'));
|
|
});
|
|
});
|