Incluir una tabla dentro de otra.

Incluir una tabla dentro de otra.

silenssilens Posts: 101Questions: 40Answers: 0

Buenos días, tengo dos tablas, una tabla A y otra B, con origenes de datos distintos (Json). Un registro de la tabla A tiene varios registros de la tabla B. Lo que quiero es que al pulsar sobre una fila de la tabla A, muestre en la misma tabla, registros de la tabla B. Un registro Hijo . Ab1, Ab2 etc..
Lo que necesito es una fila hijo con un origen de datos distinto de la propia tabla..

Tabla A:

function historia(){// Muestra las Historias sin filtros
    var parametros={
         "usuario":'a',
         "clave":b'
    };


    tabla = $('#tbl_entidad').DataTable( { //Voy a necesitar la variable tabla
            
        "ajax": {
            "data":parametros,
            "url": "prueba.php", //web a la que llamo y hace el trabajo.
            "type": "POST", //Metodo usado por la funcion para pasar variable
            "dataSrc": "",
        },
             
        "columns": [
        
            { "data": "id" },
            { "data": "name" },
            
        ]
    } 
            
);

$('#tbl_entidad tbody').on('click', 'button.form', function ()
            var data_form = tabla.row($(this).parents("tr")).data();
            
        } );
    

        $('#tbl_entidad tbody').on('click', 'tr', function tr () {
            
                var data = tabla.row( this ).data();
                
        } );

 

La tabla B es igual que la A pero con origen de datos distintos.

Gracias

Answers

  • silenssilens Posts: 101Questions: 40Answers: 0

    Muy buenas, casi he conseguido hacerlo, dejo aqui el código por si a alguien le vale.
    El único problem es que para que me refresque la fila hija, tengo que hacer doble click sobre ella. El primer click, me aparece la fila que he pulsado anteriormente.



    function rowChild ( d ) { var parametros = {//Las variables que le paso "ids":d.id, //Aqui tengo el id de la historia }; $.ajax ({ data: parametros, "url": "php/hi.php", //web a la que llamo y hace el trabajo. type: "POST", success: function(data){ objJson=JSON.parse(data); } }); return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ '<tr>'+ '<td>Id:</td>'+ '<td>'+objJson['0'].id+'</td>'+ '</tr>'+ '<tr>'+ '<td>Tarea:</td>'+ '<td>'+objJson['0'].name+'</td>'+ '</tr>'+ '<tr>'+ '<td>Descripción:</td>'+ '<td>'+objJson['0'].dsc+'</td>'+ '</tr>'+ '<tr>'+ '<td>Colaborador:</td>'+ '<td>'+objJson['0'].colab_name+'</td>'+ '</tr>'+ '<tr>'+ '<td>Presupuesto Asignado:</td>'+ '<td>'+objJson['0'].prsp_def+'</td>'+ '</tr>'+ '<tr>'+ '<td>Gasto Real:</td>'+ '<td>'+objJson['0'].prsp_ctb+'</td>'+ '</tr>'+ '</table>'; } function prueba(){ var parametros={ "usuario":'n', }; table = $('#example').DataTable( { //Voy a necesitar la variable tabla select: { "style": 'single' }, "pagingType": "full_numbers", //Hace que se muestren todos los elementos de la paginación "responsive": "true", "language": { "url": "https://cdn.datatables.net/plug-ins/1.10.11/i18n/Spanish.json" }, "dom": 'Bfrtip', "buttons": [ 'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5' ], "destroy": "true", //Esto lo hago para que no me de error el datatable cuando lo vuelvo a inicializar una vez cargado. "ajax": { "url": "php/his_.php", //web a la que llamo y hace el trabajo. "type": "POST", //Metodo usado por la funcion para pasar variable "dataSrc": "", "data": parametros, //En el data meto la variable cif con el contenido de dni, es formato json }, "columns": [ { "className": 'details-control', "data": null, "defaultContent": '' }, { "data": "id" }, { "data": "name" }, { "data": "dsc" }, { "data": "proyecto_name" }, { "data": "prsp_def" }, { "data": "prsp_ctb" }, ], }); $('#example tbody').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 row.child( rowChild(row.data()) ).show(); tr.addClass('shown'); } } ); }
This discussion has been closed.