I'm having a problem with the nested datatables, the child rows (details), are showing all the data, but I want every information to remain in your line, can anyone help me? my code below and an image to illustrate ...
function format(table_id) {
return '<hr/>' +
'<table cellpadding="5" id="detalhes' + table_id + '" class="display" cellspacing="0" border="0" width="50%" style="padding-left:80px;">' +
'<thead><tr><th>Cód. Nota:</th><th>Cód. Produto:</th><th>Descrição:</th><th>Quantidade:</th><th>R$ Unid.:</th><th>% IPI:</th><th>R$ IPI:</th><th>% Desc.:</th><th>R$ Desc.:</th><th>Desc. Unit.:</th><th>R$ Total:</th></tr></thead>' +
'</table>' +
'<hr/>';
}
var iTableCounter = 1;
var oInnerTable;
$(document).ready(function() {
TableHtml = $('#example').html();
var table = $('#example').DataTable({
"bProcessing": true,
//"paging": false,
"searching": false,
//"info": false,
"rowId": 'NOTA',
"ajax": {
"url": 'forms/customer-details/jsonData.php',
"type": 'POST',
"data": {
"idCustomer": <?php echo $idCustomer; ?>
}
},
"scrollX": true,
"language": {
"sUrl": "../plugins/datatables/Portuguese-Brasil.json"
},
"aLengthMenu": [[10, 20, 30, 50, -1], [10, 20, 30, 50, "Todos"]],
"aoColumns": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{"mData": "NOTA"},
{"mData": "NRO_NOTA"},
{"mData": "EMISSAO",
render: function(data, type, row) {
var dateSplit = data.split('-');
return type === "display" || type === "filter" ?
dateSplit[1] + '/' + dateSplit[2] + '/' + dateSplit[0] :
data;
}
},
{"mData": "QUANTIDADE1",
render: $.fn.dataTable.render.number()},
{"mData": "BRUTO",
render: $.fn.dataTable.render.number('.', ',', 2, 'R$ ')},
{"mData": "VALOR_DESCONTO1",
render: $.fn.dataTable.render.number('.', ',', 2, 'R$ ')},
{"mData": "TOTAL1",
render: $.fn.dataTable.render.number('.', ',', 2, 'R$ ')},
{"mData": "VALOR_IPI1",
render: $.fn.dataTable.render.number('.', ',', 2, 'R$ ')},
{"mData": "VALOR_SUBST",
render: $.fn.dataTable.render.number('.', ',', 2, 'R$ ')},
{"mData": "TOTAL_NF",
render: $.fn.dataTable.render.number('.', ',', 2, 'R$ ')},
{"mData": "PRECO_MEDIO",
render: $.fn.dataTable.render.number('.', ',', 2, 'R$ ')},
{"mData": "REPRES_NOME"},
{"mData": "VENDEDOR_NOME"},
{"mData": "OP_NOME"},
{"mData": "FRANQUEADO_NOME"},
{"mData": "CARTEIRA"},
{"mData": "TRANSP_NOME"},
{"mData": "RASTREAMENTO_CORREIO"},
{"mData": "CONHECIMENTO"},
{"mData": "VALOR_FRETE",
render: $.fn.dataTable.render.number('.', ',', 2, 'R$ ')},
{"mData": "PERCENTUAL",
render: $.fn.dataTable.render.number('.', ',', 2, '% ')},
{"mData": "DESCRICAO"},
{"mData": "DATA_OCORRENCIA"}
],
"order": [[1, "desc"]]
});
$('#example tbody').on('click', 'td.details-control', function() {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
row.child.hide();
tr.removeClass('shown');
} else {
row.child(format(iTableCounter)).show();
tr.addClass('shown');
oInnerTable = $('#detalhes' + iTableCounter).DataTable({
"bProcessing": true,
"ajax": {
"url": 'forms/customer-details/jsonNota.php',
"type": 'POST',
"data": {
"idCustomer": <?php echo $idCustomer; ?>
}
},
"autoWidth": true,
//"deferRender": true,
"info": false,
//"lengthChange": false,
//"ordering": false,
//"paging": false,
//"scrollX": false,
//scrollY": false,
"searching": false,
"language": {
"sUrl": "../plugins/datatables/Portuguese-Brasil.json"
},
"aLengthMenu": [[10, 20, 30, 50, -1], [10, 20, 30, 50, "Todos"]],
"aoColumns": [
{"mData": "NOTA"},
{"mData": "COD_PRODUTO"},
{"mData": "DESC_PROD"},
{"mData": "QUANTIDADE"},
{"mData": "UNITARIO"},
{"mData": "PCT_IPI"},
{"mData": "VALOR_IPI"},
{"mData": "DESCONTO"},
{"mData": "VALOR_DESCONTO"},
{"mData": "DESC_UNITARIO"},
{"mData": "TOTAL"}
],
"order": [[0, "desc"], [1, "asc"]]
});
iTableCounter = iTableCounter + 1;
}
});
});