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
document.addEventListener('livewire:init', function () {
    var dataTableName = document.getElementById('datatable-config').dataset.datatableName;
    var dataTableColumnsConfig = JSON.parse(document.getElementById('datatable-config').dataset.datatableColumnsConfig);
        $('#'+dataTableName+'-table').DataTable({

            responsive: true,
            processing: true,
            serverSide: true,
            orderCellsTop: true, // Allows inputs in the header
            fixedHeader: true,   // Optional: keeps header fixed while scrolling
            ajax: {
                url: '/api/report-data/' + dataTableName, // Dynamically construct the URL with the datatable name
                type: 'GET', // HTTP method
            },
            columns: dataTableColumnsConfig,
            dom: 'lBfrtip', // DataTables layout controls
            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' // Buttons positioned at the top-left
            },
            columnDefs: [
                { responsivePriority: 1, targets: 0 }, // Prioritize visibility of employee name
                { responsivePriority: 2, targets: -1 } // Secondary priority for office location
            ]
        });

    });



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