Laravel-Training-Project/resources/js/datatables.js

import 'tailwindcss';
import $ from 'jquery';
import 'laravel-datatables-vite';
import JSZip from 'jszip'; // Required for Excel and CSV export
import 'datatables.net';
import 'datatables.net-buttons';
import 'datatables.net-buttons/js/buttons.html5.js'; // For HTML5 export buttons
import 'datatables.net-buttons/js/buttons.print.min.js'; // For the print button
import 'datatables.net-responsive';
import 'pdfmake/build/pdfmake.js'; // Required for PDF export
import 'pdfmake/build/vfs_fonts.js'; // Required for PDF export
import './dataTables.tailwindcss.js';
import 'datatables.net-responsive-dt';



// Ensure jQuery is available globally
window.$ = window.jQuery = $;
window.JSZip = JSZip;
// Initialize DataTable
let dataTableInstance;
var livewireSearchTerms ={};
function initializeDataTable() {
    var dataTableName = document.getElementById('datatable-config').dataset.datatableName;
    var dataTableColumnsConfig = JSON.parse(document.getElementById('datatable-config').dataset.datatableColumnsConfig);
    if ($.fn.DataTable.isDataTable(`#${dataTableName}-table`)) {
        dataTableInstance.destroy();
        $(`#${dataTableName}-table tbody`).empty(); // Clear rows to prevent residue
    }

    dataTableInstance = $(`#${dataTableName}-table`).DataTable({
        responsive: true,
        retrieve: true,
        searching: false,
        processing: true,
        serverSide: true,
        orderCellsTop: true,
        fixedHeader: true,
        ajax: {
            url: '/api/report-data/' + dataTableName,
            type: 'POST',
            dataSrc: function (json) {
                console.log('Returned rows:', json.data);
                return json.data;
            },
            data: function (d) {
                d.searchTerms = livewireSearchTerms || {};
            }
        },
        columns: dataTableColumnsConfig,
        dom: 'lBfrtip',
        buttons: [
            { extend: 'copyHtml5', className: 'dt-button' },
            { extend: 'csvHtml5', className: 'dt-button' },
            { extend: 'excelHtml5', className: 'dt-button' },
            { extend: 'pdfHtml5', className: 'dt-button' },
            { extend: 'print', className: 'dt-button' },
        ],
        layout: {
            topStart: 'buttons'
        },
        columnDefs: [
            { responsivePriority: 1, targets: 0 },
            { responsivePriority: 2, targets: -1 }
        ]
    });
}
document.addEventListener('livewire:init', function () {

    console.log('Initializing DataTable');



    initializeDataTable();

    Livewire.on('search-terms-updated', (searchTerms) => {

        livewireSearchTerms = searchTerms || {};
        setTimeout(() => {
            initializeDataTable();
        }, 50); // Slight delay gives Livewire time to patch DOM




    });

    });






document.addEventListener('DOMContentLoaded', () => {
    console.log("datatables.js is working!");
});