Put a subtable in an HTML table - JQuery

In the box view are all the sales made in the detail part there is a click that has to be displayed to show its detail, I do not know if I let myself understand. So far I have created the subtable but I still can not place it in the when I click on the +

MY HTML code of the table:

<div class="box-body">
<table id="tabla_ventas"
class="table table-bordered table-condensed table-hover responsive"
cellspacing="0" width="100%">
<thead class="background-thead">
<tr>
<th>Nº</th>
<th>CLIENTE</th>
<th>TOTAL</th>
<th style="width: 200px;">FEHA</th>
<th>DETALLE</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>

JQuery of the table

$(document).ready(function () {

    $(function () {

        tabla_ventas = $('#tabla_ventas').DataTable({
            "processing": true,
            "serverSide": true,
            "order": [],

            "ajax": {
                "url": baseurl + 'Caja/listar_ventas',
                "type": "POST",
                "data": {"ci_csrf_token": ciCsrfToken}
            },

            "columnDefs": [
                {
                    "targets": [-1, 0, 1, 2, 3],
                    "orderable": false
                }
            ],
            "language": {
                "processing": "Procesando...",
                "lengthMenu": "Mostrar _MENU_ registros",
                "zeroRecords": "No se encontraron resultados",
                "emptyTable": "Ningún dato disponible en esta tabla",
                "info": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                "infoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                "infoFiltered": "(filtrado de un total de _MAX_ registros)",
                "infoPostFix": "",
                "search": "Buscar:",
                "url": "",
                "infoThousands": ",",
                "loadingRecords": "Cargando...",
                "paginate": {
                    "first": "Primero",
                    "last": "Último",
                    "next": "Siguiente",
                    "previous": "Anterior"
                },
                "aria": {
                    "sortAscending": ": Activar para ordenar la columna de manera ascendente",
                    "sortDescending": ": Activar para ordenar la columna de manera descendente"
                }
            },
            "lengthMenu": [[10, 15, 20, 25], [10, 15, 20, 25]],
            "iDisplayLength": 10,
        }); 
    });
});

The JQuery code

function detalle_venta (code) {

//    alert(codigo);
    var tr = $('#myTable tbody').closest('tr');
    var row = tabla_ventas.row(tr);
    $.ajax({
        url: baseurl + 'Caja/traer_detalle',
        type: "POST",
        cache: false,
        data: {codigo: codigo},
        success: function (result) {
            if (row.child.isShown()) {

                row.child.hide(result);
                tr.removeClass('shown');
            } else {

                row.child(result).show();
                tr.addClass('shown');
            }
        },
        error: function (result) {
            alert("error");
        }
    });
}

The controller code Fill table

public function listar_ventas() {
        $pagos = $this->caja->obtener_data_pagos();
        /* $this->asistencia->obtener_todos(); */
        $estado = null;
        $data = array();
        $no = $_POST ['start'];
        foreach ($pagos as $pago) {
            $no ++;
            $row = array();
            $row [] = '<div class="text-left">' . 'VEN000' . $pago->id_venta . '</div>';
            $row [] = $pago->nombres_completos;
            $row [] = $pago->total;
            $row [] = $pago->fecha_venta;
            $row [] = '<div onclick="detalle_venta(' . $pago->id_venta . ')" class="text-center"><a><i class="fa fa-plus-circle fa-2x"></i></a></div>';
            $data [] = $row;
        }
        $output = array(
            "draw" => $_POST ['draw'],
            "recordsTotal" => $this->caja->contador_total_pagos(),
            "recordsFiltered" => $this->caja->contador_filtrado_pagos(),
            "data" => $data
        );
        echo json_encode($output);
    }

The controller code will bring_detail

public function traer_detalle() {
        $buscar = $this->input->post('codigo');
        $reg = $this->caja->traer_detalle($buscar);

        if (COUNT($reg) != 0) {//VALIDACION
            echo "            <table class='table table-hover  table-condensed table-bordered' >";
            echo "            <thead style='color:white;background:#4FC3F7;'>";
            echo "            <tr>";
            echo "            <th class='alnright' width=10% style='background:#FFF; border: hidden; border-right: 1px solid black;'></th>";
            echo "            <th class='text-center' width=5% style=' color: #000; border: 1px solid black;'><b>N°</b></th>";
            echo "            <th class='text-center' width=20% style=' color: #000; border: 1px solid black;' ><b>PRODUCTO</b></th>";
            echo "            <th class='text-center' width=10% style=' color: #000; border: 1px solid black;' ><b>CANTIDAD </b></th>";
            echo "            <th class='text-center' width=10% style=' color: #000; border: 1px solid black;' ><b>PRECIO CAMBIO</b></th>";
            echo "            <th class='text-center' width=10% style=' color: #000; border: 1px solid black;' ><b>SUBTOTAL</b></th>";
            echo "            </tr>";
            echo "            </thead>";
            echo "            <tbody>";

            $contador = 0;

            for ($i = 0; $i < count($reg); $i++) {
                $contador ++;
                $accesorio = $reg[$i]['nombre'];
                $PRECIO = $reg[$i]['precio'];
                $CANTIDAD = $reg[$i]['cantidad'];
                $SUBTOTAL = $reg[$i]['subtotal'];

                echo "            <tr>";
                echo "            <td style='border: hidden; border-right: 1px solid black;' width='5px'>&nbsp;</td>";
                echo "            <td class='text-center' style='color:white;background:#ECEFF1;; color: #000; border: 1px solid black;'><b>$contador</b></td>";
                echo "            <td class='text-center' style='color:white;background:#ECEFF1; color: #000; border: 1px solid black;'><b>$accesorio</b></td>";
                echo "            <td class='text-center' style='color:white;background:#ECEFF1; color: #000; border: 1px solid black;'><b>$PRECIO</b></td>";
                echo "            <td class='text-center' style='color:white;background:#ECEFF1; color: #000; border: 1px solid black;'><b>$CANTIDAD</b></td>";
                echo "            <td class='text-center' style='color:white;background:#ECEFF1; color: #000; border: 1px solid black;'><b>$SUBTOTAL</b></td>";
                echo "            </tr>";
            }

            echo "            </tbody>";
            echo "            </table>";
        }
    }

The Model code

public function traer_detalle($buscar) {
        $this->db_caja->reconnect();
        $query = $this->db_caja->query("SELECT pro.nombre,detalle_venta.* FROM detalle_venta 
                                       INNER JOIN producto pro on pro.id_producto=detalle_venta.id_producto WHERE id_venta='$buscar'");
        return $query->result_array();
    }