I have a data table that has 2 buttons, the export for pdf and csv. My colleague asked me if possible, there is only one button in the table and when the user clicks it, it will automatically download two file types. The CSV and the PDF one. Is that possible? Thanks for answering.
Currently my datatable code is
$('#apparatus-table').DataTable( {
pageLength: 5,
dom: 'Bfrtip',
buttons:[
{
extend: 'csv',
className: 'grantors-btn rounded-full font-bold bg-indigo-500 px-4 py-2 text-white',
text: 'CSV',
},
{
extend: 'pdf',
className: 'grantors-btn rounded-full font-bold bg-indigo-500 px-4 py-2 text-white',
text: 'PDF',
},
],
});
It's not possible but you can make a workaround. You can bind an event to both the buttons in order to trigger the other button click event, but you have to be carefull, because you can crush your website if you don't take in consideration the recursion that might happen. Code like this make an infinite loop and deplete your heap really quickly:
// NOT TO USE
$(".buttons-pdf").on("click",()=> $(".buttons-excel").trigger("click"));
$(".buttons-excel").on("click",()=> $(".buttons-pdf").trigger("click"));
You might consider something more elaborate, with some event propagation controll or event manipulation, but it might be not worth it.