File "custom_datatable.js"

Full Path: /home/trinadezambia/public_html/ecommerce/assets/admin/js/custom_datatable.js
File size: 3.57 KB
MIME-type: text/plain
Charset: utf-8

// Define a global namespace for datatable utilities
window.DatatableUtils = {
    // Public method to refresh a specific datatable by ID or all datatables
    refreshDatatable: function (tableId = null) {
        if (tableId && $.fn.DataTable.isDataTable('#' + tableId)) {
            // Refresh specific table if ID is provided and table exists
            $('#' + tableId).DataTable().ajax.reload(function () {
                console.log('Datatable ' + tableId + ' refreshed successfully');
            }, false);
        } else {
            // Refresh all datatables if no ID provided or table not found
            const datatables = $.fn.dataTable.tables();
            if (datatables.length > 0) {
                $(datatables).each(function () {
                    $(this).DataTable().ajax.reload(function () {
                        console.log('Datatable refreshed successfully');
                    }, false);
                });
            }
        }
    }
};

document.addEventListener("DOMContentLoaded", function () {

    // Show spinner on AJAX start, hide on complete
    $(document).on('ajaxStart', function () {
        $('#datatable-loading').removeClass('d-none');
    }).on('ajaxStop', function () {
        $('#datatable-loading').addClass('d-none');
    });
    // Reset filters
    $('#resetFilters').on('click', function () {
        $('#statusFilter, #brandFilter, #categoryFilter').val('');
        $('#reportrange').val('');
        // Trigger filter update if needed
    });


    const datatableElements = document.querySelectorAll("[data-datatable]");

    datatableElements.forEach((el) => {
        const route = el.getAttribute("data-route");
        const columns = JSON.parse(el.getAttribute("data-columns"));
        const options = el.getAttribute("data-options")
            ? JSON.parse(el.getAttribute("data-options"))
            : {};

        // Check if the DataTable is already initialized
        if ($.fn.DataTable.isDataTable(el)) {
            return; // Skip initialization if already initialized
        }


        // Default options
        let defaultOptions = {
            language: {
                emptyTable: "<div class='text-center text-secondary p-3'><i class='ti ti-database fs-1'></i><br>No data available.</div>"
            },
            select: false,
            responsive: true,
            processing: true,
            serverSide: true,
            ajax: {
                url: route,
                type: "POST",
            },
            columns: columns,
            
        };

        // Merge options (user defined overrides defaults)
        let finalOptions = Object.assign({}, defaultOptions, options);

        // Initialize DataTable
        $(el).DataTable(finalOptions);
    });
});

$(document).ready(function () {
    // Add click event listener for refresh button
    $('#refresh, .refresh-table').on('click', function () {
        // Try to find the closest datatable to the clicked button
        const closestTable = $(this).closest('.card').find('table.dataTable');

        if (closestTable.length > 0) {
            // If found, refresh only that table
            const tableId = closestTable.attr('id');
            if (tableId) {
                // Use the global method to refresh the specific table
                window.DatatableUtils.refreshDatatable(tableId);
                return;
            }
        }

        // If no specific table found, refresh all datatables
        window.DatatableUtils.refreshDatatable();
    });
});