Nested Datatables, Child Rows

rafamek7

Hello everyone, I'm having a problem with the nested datatables, the child rows are showing all the data, but I want each information to stay in its particular parent row, can any one help me? my code below...

var oInnerTable;

$(document).ready(function() {
    TableHtml = $('#example').html();
    var table = $('#example').DataTable({
        "bProcessing": true,
        "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"]]
    });

    var table = $('#example').DataTable();
    $('#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()).show();
            tr.addClass('shown');
            oInnerTable = $('#detalhes').DataTable({
                "bProcessing": true,
                "ajax": {
                    "url": 'forms/customer-details/jsonNota.php',
                    "type": 'POST',
                    "data": {
                        "idCustomer": <?php echo $idCustomer; ?>
                    }
                },
                "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"]]
            });
        }
    });
});

rafamek7

my function format in the begin

function format() {
    return  '<hr/>' +
            '<table cellpadding="5" id="detalhes" 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/>';

}