DataTables export buttons
DataTables export buttons
sxperiaz777
Posts: 5Questions: 2Answers: 0
Hi guys!
I'm new using DataTables and would like to learn how it's being implemented.
I have a view page (please see attached fle - Details.png) and initially loaded with data. Toggling the dropdown list will reload the page with the corresponding data.
I included the export buttons for me to able to export the data using the available file formats. My issue is that whenever I clicked on the button/s, nothing happens. All the required js/css files were included in my bundle config.
Below is my javascript code.
$(document).ready(function () {
var table = $("#MyDataTable").dataTable({
'bSort': false,
'bAutoWidth': false,
'aoColumns': [
{ sWidth: "5%", bSearchable: false, bSortable: false },
{ sWidth: "35%", bSearchable: false, bSortable: false },
{ sWidth: "30%", bSearchable: false, bSortable: false },
{ sWidth: "30%", bSearchable: false, bSortable: false }
],
'bInfo': null,
'paging': false,
'bFilter': false,
dom: 'Bfrtip',
buttons: [
{
extend: 'copyHtml5',
exportOptions: {
columns: ':contains("Office")'
}
},
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
});
});
Thanks in advance for all your help! 
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Are you sure? Have you checked your browser console for errors?
Are you sure? Can you show us your HTML head section?
Hi Tangerine,
Yeah, I forgot to check (sorry about that). Got this error from chrome's dev tools:
Uncaught TypeError: this.processing is not a function
at r.action (buttons.html5.min.js:54)
at r (dataTables.buttons.min.js:38)
at HTMLAnchorElement.<anonymous> (dataTables.buttons.min.js:38)
at HTMLAnchorElement.dispatch (jquery-1.12.4.js:5226)
at HTMLAnchorElement.elemData.handle (jquery-1.12.4.js:4878)
Any idea why I'm getting these? Thanks!
What version of Datatables and Buttons are you using?
I suspect you have mismatched versions. Maybe upgrade the Buttons to the latest (1.3.1 think).
Also you are using the old form of the Datatables initialization. If you are just starting then you will want to use the current format, like
var table = $("#MyDataTable").dataTable({should bevar table = $("#MyDataTable").DataTable({. Notice the upper caseDin the wordDataTable.https://datatables.net/manual/installation#Initialising-DataTables
Also some of the init options you are suing are the old form. They work but its probably best practice to use the new form. There is Datatables documentation that maps the old to the new commands but I can't fine it. An example is
bAutoWidththe old from and the new isautoWidth. Also, unless you know what its doing you probably want to remove'bAutoWidth': false,from the config as it can mess with the column widths.Kevin
Thank you @kthorngren for the help! You're right, the js/css file versions are not matched. I reloaded all the needed js/css and it;s now working!
Got another issue though. If you can see/open the attached file, there's this dropdown on my page where if toggled, it will update/reload the data in the datatables list. My issue now is, regardless how many times I toggle the dropdown field and do export, the file will always contain the data data I got the first time the page is loaded.
Any idea what's to be done for it to work?
Thanks in advance!
Hello,
I am getting the same error:
I confirmed the versions match with what is on the example: https://datatables.net/extensions/buttons/examples/initialisation/export.html .
Appreciate inputs on what else may be missing,
regards,
harsha
Happy to take a look into it if you provide a link showing the issue.
Allan
Hello Allan,
Sorry for the late response. Issue is resolved though. Funny enough, it was Chrome browser that was caching the error message. Incognito mode helped discover the issue was fixed, once compatible versions of js libs were added.
Regards,
Harsha