I developed a functionality for file export using JQuery Datatable Collections
. When I click on a button e.g PDF (see image below), it exports Datatable as PDF file.
Here Is My Code for that.
buttons: [
{
extend: 'collection',
text: 'Save & Column Visibility',
autoClose: true,
buttons: [
{ text: 'Copy', extend: 'copyHtml5'},
{ text: 'Excel', extend: 'excelHtml5'},
{ text: 'CSV', extend: 'csvHtml5'},
{ text: 'PDF', extend: 'pdfHtml5'},
{ text: 'Print', extend: 'print' }
],
fade: true,
}
],
My requirement is to implement this functionality on drop-down change event instead of button click event.
Here is my code for drop-down i have done so far.
$('<div class="pull-right">' +
'<select id="dropdown" name="dropdown" class="form-control">' +
'<option value="copy">Copy</option>' +
'<option value="excel">Excel</option>' +
'<option value="csv">CSV</option>' +
'<option value="pdf">PDF</option>' +
'<option value="print">print</option>' +
'</select>' +
'</div>').appendTo("#tbMenu_wrapper .dataTables_filter");
$(".dataTables_filter label").addClass("pull-right");
});
Here is the Function for Onchange Event which I have created For Testing Purpose.
$(function () {
$("#dropdown").change(function () {
if ($(this).val() == "copy") {
alert("From Copy");
}
else if ($(this).val() == "excel") {
alert("From excel");
}
else if ($(this).val() == "csv") {
alert("From csv");
}
else if ($(this).val() == "pdf") {
alert("From pdf");
}
else if ($(this).val() == "print") {
alert("From print");
} else {
alert("From else part");
}
});
It works fine when I click on Drop-down value and gives me alert as specified in function. But now what should I do in above mentioned code which will give me file export functionality on Drop-down change event?
I Found Solution For My Question Which I am Sharing For Future Reference.
Just Replace this line alert("From Copy");
with this
var table = $('#tbMenu').DataTable();
table.button('.buttons-copy').trigger();
Thanks.