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!"); });