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
var dataTableInstance;
var searchTerms ={};
function initializeDataTable() {
    var dataTableName = document.getElementById('datatable-config').dataset.datatableName;
    var dataTableColumnsConfig = JSON.parse(document.getElementById('datatable-config').dataset.datatableColumnsConfig);
    var dataTableHeadersConfig = JSON.parse(document.getElementById('datatable-config').dataset.datatableHeadersConfig);


    //Set up any action columns
    function doActionButton(url, id)
    {
        window.open(url, "_blank");
    }
    window.doActionButton=doActionButton;

    var renderFunctions = [];
    dataTableHeadersConfig.forEach(function (headerColumn, columnIndex){
        if(headerColumn.type === "action")
        {
            let buttonUrl = dataTableColumnsConfig[columnIndex].buttonUrl;
            let parameters = dataTableColumnsConfig[columnIndex].querystring_parameters;
            console.log(parameters);
            let renderBody = `if (type === "display") {console.log(row);`;
            renderBody += `return '<button class="action-button" onclick="doActionButton(`;
            renderBody += `\\'`+buttonUrl;
            parameters.forEach(function (parameter, index){
                if(index === 0)
                {
                    renderBody += '?';
                }
                else
                {
                    renderBody += '&';
                }
                for(let key in parameter)
                {
                    renderBody += key+'=';
                    if(parameter[key] === 'row.id')
                    {
                        renderBody += '\'+'+encodeURIComponent(parameter[key])+'+\'';
                    }
                    else
                    {
                        renderBody += encodeURIComponent(parameter[key]);
                    }
                }

            })
            renderBody += `\\'`;
            renderBody += ")\">"+dataTableColumnsConfig[columnIndex].buttonText+"</button>'}return data;";
            renderFunctions[columnIndex] = new Function('data', 'type', 'row', 'meta', renderBody);
            console.log(renderFunctions[columnIndex]);
            dataTableColumnsConfig[columnIndex].searchable = false;
            dataTableColumnsConfig[columnIndex].orderable = false;
            dataTableColumnsConfig[columnIndex].render = renderFunctions[columnIndex];

        }
    })

    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 data:', json);
                //populate any dropdown headers
                //console.log(dataTableHeadersConfig);
                dataTableHeadersConfig.forEach(function(headerConfig, index){

                    if(headerConfig.searchtype == "dropdown")
                    {
                        //console.log('Tyson here');
                        var dropdown = $('#'+headerConfig.header.replace(' ', '-')+'FilterDropdown');
                        //console.log(dropdown);
                        dropdown.empty().append($('<option>',{
                            value: '',
                            text: '-- Not  Filtered  --'
                        }));
                        json.dropdowndata[index].forEach(function (option) {
                            var selected = false;
                            if(json.searchterms && json.searchterms[index]){
                                    Object.keys(searchTerms[index]).forEach(function (key){
                                        var searchValue = searchTerms[index][key]
                                        console.log('value: '+searchValue)
                                        if(option === searchValue)
                                        {
                                            selected = true;
                                        }})}

                                        dropdown.append($('<option>',{
                                            value: option,
                                            text: option
                                        }).prop('selected', selected))});
                              }});


                            return json.data;
            },
            data: function (d) {
                d.searchTerms = searchTerms || {};
            }
        },
        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: 1 },
            { responsivePriority: 2, targets: -1 },
            {visible:false, targets:0}
        ]
    });
}
document.addEventListener('livewire:init', function () {

    console.log('Initializing DataTable');



    initializeDataTable();


    });
let inner = {};
function getFilterInput(searchTerm, index, searchType, extra){


    switch (searchType) {
        case "text":
        case "number":
            inner[index] = searchTerm;
            break;
        case "date":
            if($.isEmptyObject(inner[index])) {
                inner[index] = {"start": "", "end": ""};
            }
            if (extra === "start") {
                inner[index].start = searchTerm;
            }
            else if (extra ===  "end") {
                inner[index].end = searchTerm;
            }
            break;
        case "dropdown":
            inner[index] = searchTerm;
            break;
    }
    searchTerms[index] =  inner;
    console.log(searchTerms[index]);
    dataTableInstance.ajax.reload();





}

window.getFilterInput = getFilterInput;





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