I have a working html/js datatable example jsfiddle that has two working buttons for exporting data; excel and csv. I declare my datatable like so:

$('#example').DataTable( {
    dom: 'Bfrtip',
    columns: [
        { data: 'name' },
        { data: 'surname' },
        { data: 'position' },
        { data: 'office' },
        { data: 'salary' }
    ],
    buttons: [
                  {
                      extend: 'excelHtml5',
                      text: 'excel',
                      exportOptions: {  modifier: {  page: 'current' }  }
                  },
                  {
                      extend: 'csvHtml5',
                      text: 'csv',
                      exportOptions: {  modifier: {  page: 'current' }  }
                  }
              ]
} );

Which cases the two default buttons to appear. In my html I have two custom button elements I want to connect to my datatable:

<button id='excelExport'>click this to export excel</button><button id='csvExport'>click this to export csv</button>

So that when I click my 'excelExport' button, it triggers the datatable export excel. I'm trying to get both custom buttons working so I can place them in more specific places with different styling, instead of using the table's default export buttons.

How can I extend my datatable export excel function to work with my custom button with id=excelExport ? I've done something similar in the past with using a custom search bar for my table's search. To do so I had to extend the search function like so:

 //set datatable to use custom search box
$('#bottomTableSearch').on('keyup change', function () {
    myBrandGapsTable.search(this.value).draw();
});  

Is there someway I can do the same for my id=excelExport button? Like:

//set datatable to use custom excel export button
$('#excelExport ').on('click', function () {
    myBrandGapsTable.export(excel); //???? pseudocode, trying to get this concept working
});  

Jsfiddle with my example is here:

/

I have a working html/js datatable example jsfiddle that has two working buttons for exporting data; excel and csv. I declare my datatable like so:

$('#example').DataTable( {
    dom: 'Bfrtip',
    columns: [
        { data: 'name' },
        { data: 'surname' },
        { data: 'position' },
        { data: 'office' },
        { data: 'salary' }
    ],
    buttons: [
                  {
                      extend: 'excelHtml5',
                      text: 'excel',
                      exportOptions: {  modifier: {  page: 'current' }  }
                  },
                  {
                      extend: 'csvHtml5',
                      text: 'csv',
                      exportOptions: {  modifier: {  page: 'current' }  }
                  }
              ]
} );

Which cases the two default buttons to appear. In my html I have two custom button elements I want to connect to my datatable:

<button id='excelExport'>click this to export excel</button><button id='csvExport'>click this to export csv</button>

So that when I click my 'excelExport' button, it triggers the datatable export excel. I'm trying to get both custom buttons working so I can place them in more specific places with different styling, instead of using the table's default export buttons.

How can I extend my datatable export excel function to work with my custom button with id=excelExport ? I've done something similar in the past with using a custom search bar for my table's search. To do so I had to extend the search function like so:

 //set datatable to use custom search box
$('#bottomTableSearch').on('keyup change', function () {
    myBrandGapsTable.search(this.value).draw();
});  

Is there someway I can do the same for my id=excelExport button? Like:

//set datatable to use custom excel export button
$('#excelExport ').on('click', function () {
    myBrandGapsTable.export(excel); //???? pseudocode, trying to get this concept working
});  

Jsfiddle with my example is here:

https://jsfiddle/martinradio/c0wezht7/12/

• javascript
• html
• jquery
• datatable

1 Answer 1

You can just trigger click events of the datatables buttons like this:

 $("#excelExport").on("click", function() {
    $(".buttons-excel").trigger("click");
 });
 $("#csvExport").on("click", function() {
    $(".buttons-csv").trigger("click");
 });