let's see who can help me solve this problem.
I have several tables with the JS datatables plugin (/)
My problem is in exporting the data in PDF and Excel.
I can not export to PDF or Excel the values that are inside the input or select fields (only the selected value)
I have several tables where there are columns that are inputs, another column selects and another column simple text. I would like to know how I can do to export all these values to Excel or PDF, if you can with this plugin. So far I have not been able to get it.
Here a extract of my code to build the datatable:
var tabla_table = $('#table').DataTable({
dom: 'Blfrtip',
buttons: [{
extend: 'collection',
text: "<i class='fa fa-cog'></i>",
buttons: [
{
extend: 'pdfHtml5',
orientation: 'landscape',
customize: function ( doc ) {
doc.defaultStyle.fontSize = 10;
},
exportOptions: {
columns: ':visible',
columns: ':not(.no-print)',
/* format: {
body: function ( data, row, column, node, sValue, nTr, type ) {
//
//check if type is input using jquery
// console.log('data val: ' + $(data).val() );
console.log('data: ' + data );
console.log('row: ' + row );
console.log('nTr: ' + nTr );
console.log('node: ' + node );
console.log('type: ' + type );
/*if( $(data).is("input") ){
return data;
}else{
return $(data).val();
}
}
}*/
//columns: [4, 8, 9, 10, 11, 12, 13, 14]
}
},{
extend: 'excel',
orientation: 'landscape',
exportOptions: {
columns: ':visible',
columns: ':not(.no-print)',
format: {
body: function ( data, row, column, node ) {
//
//check if type is input using jquery
//console.log('PRUEBA: ' + $(data).val() );
if( $(data).is("input") ){
return data;
}else{
return $(data).val();
}
}
}
//columns: [4, 8, 9, 10, 11, 12, 13, 14]
}
},{
text: 'Imprimir',
extend: 'print',
orientation: 'landscape',
exportOptions: {
columns: ':visible',
columns: ':not(.no-print)'
}
},
/* 'colvis'*/
]
}
],.....
Out put in PDF:
I hope I could have provided enough information to resolve this, if it can be resolved. And if more information is needed, do not hesitate to tell me.
Thank you very much in advance
let's see who can help me solve this problem.
I have several tables with the JS datatables plugin (https://datatables/)
My problem is in exporting the data in PDF and Excel.
I can not export to PDF or Excel the values that are inside the input or select fields (only the selected value)
I have several tables where there are columns that are inputs, another column selects and another column simple text. I would like to know how I can do to export all these values to Excel or PDF, if you can with this plugin. So far I have not been able to get it.
Here a extract of my code to build the datatable:
var tabla_table = $('#table').DataTable({
dom: 'Blfrtip',
buttons: [{
extend: 'collection',
text: "<i class='fa fa-cog'></i>",
buttons: [
{
extend: 'pdfHtml5',
orientation: 'landscape',
customize: function ( doc ) {
doc.defaultStyle.fontSize = 10;
},
exportOptions: {
columns: ':visible',
columns: ':not(.no-print)',
/* format: {
body: function ( data, row, column, node, sValue, nTr, type ) {
//
//check if type is input using jquery
// console.log('data val: ' + $(data).val() );
console.log('data: ' + data );
console.log('row: ' + row );
console.log('nTr: ' + nTr );
console.log('node: ' + node );
console.log('type: ' + type );
/*if( $(data).is("input") ){
return data;
}else{
return $(data).val();
}
}
}*/
//columns: [4, 8, 9, 10, 11, 12, 13, 14]
}
},{
extend: 'excel',
orientation: 'landscape',
exportOptions: {
columns: ':visible',
columns: ':not(.no-print)',
format: {
body: function ( data, row, column, node ) {
//
//check if type is input using jquery
//console.log('PRUEBA: ' + $(data).val() );
if( $(data).is("input") ){
return data;
}else{
return $(data).val();
}
}
}
//columns: [4, 8, 9, 10, 11, 12, 13, 14]
}
},{
text: 'Imprimir',
extend: 'print',
orientation: 'landscape',
exportOptions: {
columns: ':visible',
columns: ':not(.no-print)'
}
},
/* 'colvis'*/
]
}
],.....
Out put in PDF:
I hope I could have provided enough information to resolve this, if it can be resolved. And if more information is needed, do not hesitate to tell me.
Thank you very much in advance
Share Improve this question asked Oct 23, 2018 at 18:52 bertiberti 1154 silver badges15 bronze badges3 Answers
Reset to default 5I've been struggling with this one recently and finally found the solution. I'll try to make it a bit more detailed.
Here's a function that checks if the exported node is the node. In such case it returns the input.value - otherwise just the data:
//function for DataTable data export to export <input>.value
var buttonCommon = {
exportOptions: {
format: {
body: function ( data, row, column, node ) {
//check if type is input using jquery
return node.firstChild.tagName === "INPUT" ?
node.firstElementChild.value :
data;
}
}
}
};
Now, with this function defined, we use it to extend the buttons:
buttons: [
$.extend( true, {}, buttonCommon, {
extend: 'copyHtml5'
} ),
$.extend( true, {}, buttonCommon, {
extend: 'excelHtml5'
} ),
$.extend( true, {}, buttonCommon, {
extend: 'pdfHtml5'
} ),
$.extend( true, {}, buttonCommon, {
extend: 'csvHtml5'
} )
],
var buttonCommon = {
exportOptions: {
format: {
body: function(data, column, row, node) {
if (row == 1) {
return $(data).is("div") ? $(data).text() : data
}
else if (row == 4) {
return $(data).is("select") ? $(data).val() : data
}
else {
return $(data).is("input") ? $(data).val() : data
}
}
}
}
};
$(document).ready(function() {
$('#tables').DataTable({
dom: 'Bfrtip',
"paging": !1,
buttons: [$.extend(!0, {}, buttonCommon, {
extend: "excel"
})]
})
});
ok, in your button
exportOptions: {
orthogonal: 'export',
}
in your columns :
render: function (data, type, row) {
return type === 'export' ? row.Descripcion: "";
}