Dispongo de una tabla en Jquery Datatables la cual dispone de tablas hijas y nietas (Una tabla con subtablas que a su vez tienen subtablas) la tabla se forma de la siguiente manera:
function cargarTabla() {
//Función interna para realizar un ajax y obtener las columnas
mvc.Datos.GetColumnas.post({ IdTabla: idTabla }, res => {
var datos = res;
datos = JSON.parse(datos);
var ruta = idTabla != 17 ? "/Datos/GetDatosPorPuesto?idPuesto=" + idPuesto : "/Datos/GetDatosDocumentacion?idLinea=" + idLinea;
table = $('#tablaDatos').DataTable({
"ajax": {
url: ruta,
dataSrc: function (data) {
return JSON.parse(data);
}
},
"bDestroy": true,
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
}, select: {
style: 'multi'
},
"iDisplayLength": 10,
"columns":
datos
,
"order": [[3, 'desc']],
"fnDrawCallback": function (oSettings) {
runAllCharts();
},
"columnDefs": [{
"render": function (data, type, row) {
return (data == 1) ? '<center><i class="fa fa-check"></i></center>' : ' <center><i class="fa fa-minus"></i></center>';
},
}]
});
//botones personalizados para exportacion
var buttons = new $.fn.dataTable.Buttons(table, {
buttons: [
{
exportOptions: {
columns: [ 1, 2, 3, 4, 5, 6,7,8,9,10,11,12]
},
orientation: 'landscape',
title: '',
text: '<i class="fa fa-3x fa-file-code" style="padding: 3px 3px 3px 3px"></i>',
className: 'btn btn-default jarvismetro-tile txt-color-white btnTablas',
attr: {
style: 'background-color:#203864;display:none',
id: 'exportJSON'
},
action: function (e, dt, button, config) {
var data = dt.buttons.exportData();
$.fn.dataTable.fileSave(
new Blob([JSON.stringify(data)]),
'Export.json'
);
}
},
{
exportOptions: {
columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
},
title: '',
extend: 'excel',
text: '<i class="fa fa-3x fa-file-excel" style="padding: 3px 3px 3px 3px"></i>',
className: 'btn btn-default jarvismetro-tile txt-color-white btnTablas',
attr: {
style: 'background-color:#203864;display:none',
id: 'exportXls'
}
}
]
}).container().appendTo($('#buttons'));
});
}
cargarTabla();
funcion para generar la subtabla y la subsubtabla:
$('#tablaDatos').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
try {
var d = row.data();
var parametros = d.Registros;
nieto = parametros;
var subtabla;
subtabla = '<table id = "child_details" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<thead><tr>' +
'<th></th>' +
'<th>campo1</th>' +
'<th>campo2</th>' +
'<th>campo3</th>' +
'<th>campo4</th>' +
'<th>campo5</th>' +
'<th>campo6</th>' +
'<th class="hide">campo7</th>' +
'</tr></thead><tbody>';
$.each(parametros, function (index, value) {
subtabla += '<tr><td class="details-control"></td>';
subtabla += '<td>' + value.campo1 + '</td>';
subtabla += '<td>' + value.campo2 + '</td>';
subtabla += '<td>' + value.campo3 + '</td>';
subtabla += '<td>' + value.campo4 + '</td>';
subtabla += '<td>' + value.campo5 + '</td>';
//valores de la tabla nieta
subtabla += '<td class="hide">' + value.campo6 + '</td>';
subtabla += '<td>' + value.campo7 + '</td>';
});
subtabla += '</tbody></table>';
row.child(subtabla).show();
childTable = $('#child_details').DataTable({
searching: false,
paging: false,
info: false,
destroy: true
});
childTable
.on('select', function (e, dt, type, indexes) {
if (type === 'row') {
var data = childTable.rows(indexes).data();
// do something with the ID of the selected items
}
});
tr.addClass('shown');
} catch {
var d = childTable.row($(this).closest('tr')).data();
var parametros = JSON.parse(d[6]);
$.each(parametros, function (index, value) {
console.log(index, value);
if (index == "Aprietes") {
nieceTable = '<table id = "niece_details" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<thead></thead><tbody>' +
'<tr><td>Apriete:</td>';
$.each(value, function () {
nieceTable += '<td>' + this.APRIETE + '</td>';
});
nieceTable += '</tr><tr><td>Par:</td>';
$.each(value, function () {
nieceTable += '<td>' + this.PAR + '</td>';
});
nieceTable += '</tr><tr><td>Angulo:</td>';
$.each(value, function () {
nieceTable += '<td>' + this.ANGULO + '</td>';
});
nieceTable += '</tr></tbody></table>';
} else {
nieceTable = '<table id = "niece_details" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<thead><tr><th>Nombre</th><th>Valor</th></tr></thead><tbody>' +
'<tr><td>' + this.Title + '</td>' +
'<td> ' + this.Value + '</td>' +
'</tr></tbody></table>';
}
});
childTable.row($(this).closest('tr')).child(nieceTable).show();
var nieceTable = $('#niece_details').DataTable({
searching: false,
paging: false,
info: false,
destroy: true,
scrollY: '50px',
select: true,
});
nieceTable
.on('select', function (e, dt, type, indexes) {
if (type === 'row') {
var data = childTable.rows(indexes).data();
// do something with the ID of the selected items
}
});
tr.addClass('shown');
}
}
});
Con esta configuración se me muestran correctamente los botones de exportación pero al pulsarlo solo se exporta la tabla padre. Estoy usando Html5 buttons Para exportar estoy usando esta librería.
He tratado de obtener la tabla hija por medio del action de los botones con esto pero sin resultado.
No puedo hacer lo mismo que la tabla hija (añadir los campos en oculto), no he logrado hacerlo mejor dicho.
¿Como puedo lograr que me exporte la tabla y sus respectivas subtablas?