table.buttons.exportData() returning no table data
table.buttons.exportData() returning no table data
I know there are a lot of threads about this but still I haven't found the solution. Ultimately I am working on generating a multi-page PDF of 12 Datatables on one page.
The challenge I am facing right now is when I try to get the data from the first table, it gives me the header rows but no table content. My page is at: http://idfg.com/offering/all-products/ and all I am trying to do is display the table export in the console. I am getting my table data from AJAX and suspect it has something to do with a refresh or something so hoping it is a simple solution that I am just overlooking. I someone could explain how I can get the data populated for the export, I will then finish up the function to combine all tables into one PDF export. Thank you!!
var table1 = $('#example').DataTable( {
dom: "Bfrtip",
ajax: "/offering/wp-content/plugins/datatables/offering1.php",
columns: [
{ data: "id" },
{ data: "volume" },
{ data: "dimension" },
{ data: "pieces" },
{ data: "grade" },
{ data: "note" },
{ data: "description" },
{ data: "l1" },
{ data: "l2" },
{ data: "l3" },
{ data: "l4" },
{ data: "l5" },
{ data: "l6" },
{ data: "l7" },
{ data: "mill" },
{ data: "start_date" },
{ data: "fob", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) },
{ data: "hot", "visible": false }
],
"oTableTools": {
"aButtons": [
{
"sExtends": "ajax",
"fnAjaxComplete": function ( XMLHttpRequest, textStatus ) {
alert( 'Ajax complete' );
}
}
]
},
"columnDefs": [
{ className: "td-id", "targets": [ 0 ] },
{ "targets": 2,
"data": "dimension",
"render": function ( data, type, full, meta ) {
return type === 'display' && data.length > 1 ?
data.substr( 2 ) :
data;
}
},
{ "targets": 15,
"data": "start_date",
"render": function ( data, type, full, meta ) {
return type === 'display' && data.length > 1 ?
data.substr( 5 ) :
data;
}
}
],
createdRow: function ( node, data ) {
if ( data.hot == '1' ) {
$(node).addClass( 'hotitem' );
}
},
order: [ 1, 'asc' ],
keys: [{
columns: ':not(:first-child)',
keys: [ 9 ]
}],
buttons: [
{
extend: 'collection',
text: 'Export',
buttons: [
{ extend: 'pdf',
text: 'PDF',
title: 'Douglas Fir and Larch Pricing and Availability',
message: 'Date: ' +(myDate),
orientation: 'landscape',
exportOptions: {
columns: ':visible'
},
customize: function ( doc ) {
doc.content.splice( 1, 0, {
margin: [ 0, 0, 0, 12 ],
alignment: 'center',
image: (myImg), width: 100
});
}
},
{ extend: 'print',
text: 'Print',
title: 'Douglas Fir and Larch Pricing and Availability',
orientation: 'landscape',
customize: function ( win ) {
$(win.document.body)
.prepend(
'<img src="http://idfg.com/offering/wp-content/uploads/2015/08/logocolor_r.png" style="text-align: center; width: 150px;" />'
);
}
}
]
}
],
"paging": false,
"info": false
} );
data1 = table1.buttons.exportData();
console.log(data1.toSource());
Result:
{
"header": [
"ID",
"Volume",
"Dimension",
"Pcs/Unit",
"Grade",
"Note",
"Description",
"8",
"10",
"12",
"14",
"16",
"18",
"20",
"Mill",
"Week of",
"FOB Mill",
""
],
"footer": null,
"body": []
} all-products:1021:1
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Answers
That isn't going to work where you have it because you've specified the
ajax
option. That makes the data loading asynchronous (first character in the AJAX acronym!). Thus the table hasn't loaded any data when you exportData call executes.You need to wait for the data to have been loaded which you can do with
initComplete
.Allan
That's what I needed!! Thank you so much for getting back to me!