I am using jQuery DataTables 1.10 and all my code is working fine. To add export functionality I refer this link. I have added all the files what is said
//code.jquery/jquery-1.11.3.min.js
.10.9/js/jquery.dataTables.min.js
.0.3/js/dataTables.buttons.min.js
//cdnjs.cloudflare/ajax/libs/jszip/2.5.0/jszip.min.js
//cdn.rawgit/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js
//cdn.rawgit/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js
//cdn.datatables/buttons/1.0.3/js/buttons.html5.min.js
//cdn.datatables/1.10.9/css/jquery.dataTables.min.css
//cdn.datatables/buttons/1.0.3/css/buttons.dataTables.min.css
I have downloaded these files and stored locally. So my final code is like :
table = $(".jqueryDataTable").DataTable( {
"initComplete": function(oSettings, json) {
alert( 'DataTables has finished its initialisation in table.' );
this.fnHideEmptyColumns(this);
$('#lblReportHeader').html(reportHeader);
$('#lblFromDate').html(fromDateHeader);
$('#lblToDate').html(fromToHeader);
$('#tblReportHeader').show();
},
"searching": false,
"retrieve": true,
"destroy": true,
"ajax": "./getReportDetails",
"jQueryUI": true,
"dom": 'r<"H"lf><"datatable-scroll"t><"F"ip>',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
],
"fnServerParams": function ( data ) {
newData=data;
newData.push( { "name": "reportType", "value": reportType }, { "name": "reportSubType", "value": reportSubType}, { "name": "fromDate", "value": fromDate}, { "name": "toDate", "value": toDate});
},
"columns": [
{ "mData": "username", "sTitle": "username"},
{ "mData": "transferType", "sTitle": "transferType"},
{ "mData": "fromAccount", "sTitle": "fromAccount"}
]
} );
But it is not showing any export button on my UI.
What is the wrong in my code ?
I am using jQuery DataTables 1.10 and all my code is working fine. To add export functionality I refer this link. I have added all the files what is said
//code.jquery./jquery-1.11.3.min.js
https://cdn.datatables/1.10.9/js/jquery.dataTables.min.js
https://cdn.datatables/buttons/1.0.3/js/dataTables.buttons.min.js
//cdnjs.cloudflare./ajax/libs/jszip/2.5.0/jszip.min.js
//cdn.rawgit./bpampuch/pdfmake/0.1.18/build/pdfmake.min.js
//cdn.rawgit./bpampuch/pdfmake/0.1.18/build/vfs_fonts.js
//cdn.datatables/buttons/1.0.3/js/buttons.html5.min.js
//cdn.datatables/1.10.9/css/jquery.dataTables.min.css
//cdn.datatables/buttons/1.0.3/css/buttons.dataTables.min.css
I have downloaded these files and stored locally. So my final code is like :
table = $(".jqueryDataTable").DataTable( {
"initComplete": function(oSettings, json) {
alert( 'DataTables has finished its initialisation in table.' );
this.fnHideEmptyColumns(this);
$('#lblReportHeader').html(reportHeader);
$('#lblFromDate').html(fromDateHeader);
$('#lblToDate').html(fromToHeader);
$('#tblReportHeader').show();
},
"searching": false,
"retrieve": true,
"destroy": true,
"ajax": "./getReportDetails",
"jQueryUI": true,
"dom": 'r<"H"lf><"datatable-scroll"t><"F"ip>',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
],
"fnServerParams": function ( data ) {
newData=data;
newData.push( { "name": "reportType", "value": reportType }, { "name": "reportSubType", "value": reportSubType}, { "name": "fromDate", "value": fromDate}, { "name": "toDate", "value": toDate});
},
"columns": [
{ "mData": "username", "sTitle": "username"},
{ "mData": "transferType", "sTitle": "transferType"},
{ "mData": "fromAccount", "sTitle": "fromAccount"}
]
} );
But it is not showing any export button on my UI.
What is the wrong in my code ?
Share Improve this question edited Sep 12, 2015 at 13:35 Gyrocode. 58.9k16 gold badges156 silver badges191 bronze badges asked Sep 11, 2015 at 10:12 Puneet PurohitPuneet Purohit 1,2916 gold badges25 silver badges43 bronze badges 5-
3
Works fine here.. I think since you have copied it to local and gave a local reference something messed up. Try giving the
cdnfiles reference itself.. – Guruprasad J Rao Commented Sep 11, 2015 at 10:25 - I think I have problem with my dom, can you correct it ? Like by adding parameter for buttons ? – Puneet Purohit Commented Sep 11, 2015 at 10:48
-
1
This is new version of adding buttons, so sorry to say, since I do not have much idea on this.. and also you have some ajax format to load data.. All that might be part of the issue. Did you try giving
CDNfile source? – Guruprasad J Rao Commented Sep 11, 2015 at 11:34 - 1 I have changes DOM value to "dom": 'Bfr<"H"lf><"datatable-scroll"t><"F"ip>' and it is showing buttons now but they are not in working state !!! – Puneet Purohit Commented Sep 11, 2015 at 12:55
- 1 I am also facing the same problem. It seems the above questions still haven't any answer yet :(. – Diganta Commented Aug 23, 2016 at 6:33
2 Answers
Reset to default 6I had the same issues where everything looked good from adding required javascript and css files to specifying "dom" value and initializing buttons array in the data table body. However, my root cause of not displaying the buttons was that I was adding one of the dependent javascripts two times and same js file was placed in two different locations inside my resources folder. As soon as I identified and remove additional duplicate js reference, the problem got resolved and I was able to see the buttons displayed and working as well.
Here issue is you have included required JS files but at the time of initialization, you haven't specified options for export like mentioned below:
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
You can remove the options from copy, csv, excel, pdf, print according to requirement.
You cannot change the name of button, it needs to be exact same as mentioned.