Search code examples
javascriptjqueryasp.net-mvcdatatablesdropdown

File export in jquery datatables using dropdown change event


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.

enter image description here

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?


Solution

  • 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.