Export the filtered table in CSV with server-side processing

pkyuen1

Hi guys,

I would like to build a button which exports in CSV my filtered datatable implemented with server-side processing, and I want to go for the approach in the FAQ: Use a server-side process to create the files to download (recommended). Having read through the forum threads, I could find 2 methods which however do not fully solve my issue:

1. Use windows.location.href - this allows me to export all the records on the server side but I could not send to the server the state of the table on the client side (e.g. search keywords)

$.fn.dataTable.ext.buttons.export =
{
    className: 'buttons-alert',
    id: 'ExportButton',
    text: "Export All To Excel",
    action: function (e, dt, node, config)
    {
        window.location.href = './ServerSide.php?ExportToExcel=Yes';
    }
};

1. Use AJAX - this allows me to send the datatable state on the client side to the server but I cannot find any way to return a response as a file download (I am using Django in the server side if this matters)

"buttons" : [{
  text: 'export CSV',
  action: function (e, dt, node, config)
  {
    $.ajax({
      "url": "/mysite/download"
      "data": dt.ajax.params()
    });
  }
}]

Is there any way which could accomplish this? In the manual, it reads "When making a request to the server using server-side processing, DataTables will send the following data in order to let the server know what data is required". However, this does not seem to include the action of pressing a datatable button, thanks!

allan

You could combine the two - use something like:

var params = table.ajax.params();
window.location.href = './ServerSide.php?ExportToExcel=Yes&dt='+JSON.stringify( params );

Then at the server-side JSON decode the dt request parameter and process it as needed. Or perhaps you could just get only the information you need and send that to the server - the search() and order() methods for example might be all you need for the export.

Allan

pkyuen1

Thanks Allan, I have actually resolved the issue with the AJAX option stated above using a callback function upon success which actually can catch the response from the server.

            "buttons": [{
                    text:       'Export CSV',
                    action: function (e, dt, node, config) { 
                        $.ajax({
                            "url": "/mysite/download",
                            "data": dt.ajax.params(),
                            "success": function(res, status, xhr) { 
                                var csvData = new Blob([res], {type: 'text/csv;charset=utf-8;'});
                                var csvURL = window.URL.createObjectURL(csvData);
                                var tempLink = document.createElement('a');
                                tempLink.href = csvURL;
                                tempLink.setAttribute('download', 'data.csv');
                                tempLink.click();
                            }
                        });
                    }

I will test your suggestion later and see if that works, thanks.