How to call Datatable csv button from custom button

Question

Need to call csv button from my custom button.

<button value="Export report to Excel" class="button-default datatable-csv" type="button" id="ExportReporttoExcel">
                <span>Export report to Excel</span>
            </button>

Instead of calling it from the Datatable button, i want the same functionality from the above button.

Looking for some configuration changes in Datatable so that i can call my custom button to export the table records as csv.

var table=$('#tableId').DataTable( {
    "paging":   true,
    "info":     true,
    "searching": true,      
    ,buttons: true
});


$("#SEARCH").on("keyup search input paste cut", function() {
    table.search(this.value).draw();
});

var buttons = new $.fn.dataTable.Buttons(table, {
     buttons: [
       'csvHtml5'
    ]
}).container().appendTo($('#ExportReporttoExcel'));

Getting output like below but i need only one button.

when you say "call the button" you mean pragmatically click it right? — Neville Nazerane
– Neville Nazerane, Commented Aug 4, 2017 at 22:19

MPPNBD · Accepted Answer · 2017-08-09 21:16:52Z

19

At last i found the solution.

In Datatable configuration , i added click event for the button to be triggered.

buttons: [
        { 
            extend: 'csv',
        }
    ]

$("#ExportReporttoExcel").on("click", function() {
    table.button( '.buttons-csv' ).trigger();
});

This works fine for me thanks for the comments and answers

answered Aug 9, 2017 at 21:16

MPPNBD

1,7765 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zoha Irshad Over a year ago

Its not working for me.Its giving me error that table.button is not a function();

Zoha Irshad Over a year ago

My code is: $("#btnExport").on("click", function() { var table = $('#tableList').DataTable(); table.button( '.buttons-excel' ).trigger(); });

davidkonrad · Accepted Answer · 2017-08-05 18:17:27Z

6

dataTables export buttons is by default enriched with signature classes like .buttons-excel, .buttons-pdf, .buttons-csv and so on. Take advantage of that :

$('#ExportReporttoExcel').on('click', function() {
  $('.buttons-excel').click()
});

answered Aug 5, 2017 at 18:17

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

1 Comment

MPPNBD Over a year ago

I no need of the Datatable buttons at all, in other words i need to customizes the button by changing the location and style

Hayat Tuge · Accepted Answer · 2020-10-09 13:15:27Z

Say you have your own button

<a href="javascript:;" style="some button style" class="button_export_excel">Export Excel</a>

And you have your table that you are using the below code for;

$(document).ready(function () {
    var table = $('#example').DataTable({
        "paging": false,
        "info": false,
        searching: false,
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'excelHtml5'
            }
        ]
    });
});

Then all you need to do is to use this code below:

$('#example').DataTable({
        "paging": false,
        "info": false,
        buttons: [
            {
                extend: 'excel'
            },
            {
                extend: 'csv'
            },
        ]
    });
$('.button_export_excel').click(() => {
    $('#example').DataTable().buttons(0,0).trigger()
})

The 0,0 points to excel and if you want to point to csv you do 0,1.

Neville Nazerane · Accepted Answer · 2017-08-04 22:21:58Z

0

If you are trying to trigger the click event of another button and you are using jQuery (according to your tags), you can use

<button onclick="$('#ExportReporttoExcel').click()">Click me</button>

This selects the element with the id "ExportReporttoExcel" and triggers a click with using jQuery.

answered Aug 4, 2017 at 22:21

Neville Nazerane

7,0894 gold badges53 silver badges88 bronze badges

1 Comment

Neville Nazerane Over a year ago

yeah this answer shows how to trigger the click of the id ExportReporttoExcel. I wasn't sure what your question was but based on your answer it seems you needed to alter the click event of the #ExportReporttoExcel. you can still use the above code if you want the button to do the same on click.

Ninos · Accepted Answer · 2024-01-12 07:12:46Z

0

I just got to try this and the extend: 'csv' still showed the built-in CSV button for me, also the triggering calls mentioned above didn't work for me either, but the below did.

This is what worked for me.

buttons: ['csv'],

Then hide the built-in CSV button after creating the Datatable, as follows:

$(".buttons-csv").hide();

Then trigger its click event from your special button handler.

$("#myExportBtn").on('click', function (ev) {
      $(".buttons-csv").trigger("click");

answered Jan 12, 2024 at 7:12

Ninos

2497 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to call Datatable csv button from custom button

5 Answers 5

2 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related