1

Que tala compañeros, actualmente estoy realizando una tabla en la cual estoy intentando agregar N despliegue según lo requiera, he leído la documentación de DataTable pero no he encontrado nada para realizar N desligues hasta ahora solo he podido realizar un primer despliegue con la ayuda de la documentación, mi código es el siguiente: primero agrego la tabla padre:

let tabla = DivlistaGrupos.find('#dtGrupos').DataTable({
data: data,
scrollX: true,
scrollY: 400,
pagingType: 'simple_numbers',
order: [[7, 'asc']],
lengthMenu: [25, 50, 75, 100],
language: {
  search: 'Buscar Registro:',
  lengthMenu: 'Mostrar _MENU_ por pagina',
  zeroRecords: 'Ningún grupo que mostrar con este filtro',
  infoEmpty: 'No hay registros disponibles',
  info: 'Mostrando _START_ al _END_ de _TOTAL_ registros',
  infoFiltered: '(filtrado de _MAX_ registros totales)',
  paginate: {
    first: 'Inicio',
    previous: '<&nbsp;&nbsp;&nbsp;&nbsp;Anterior',
    next: 'Siguiente&nbsp;&nbsp;&nbsp;&nbsp;>',
    last: 'Final',
  },
},
columns: [
  {
    data: 'id',
    defaultContent: '',
  },
  {
    data: 'id',
    defaultContent: '',
  },
  {
    data: 'nombre',
    defaultContent: '',
  },
  {
    data: 'tipo',
    defaultContent: '',
  },
  {
    data: 'telefono',
    defaultContent: '',
  },
  {
    data: 'fechaAlta',
    defaultContent: '',
  },
  {
    data: 'representante',
    defaultContent: '',
  },
  {
    data: 'nIntegrante',
    defaultContent: '',
  },
],
columnDefs: [
  //checks
  {
    type: 'html',
    orderable: false,
    targets: 0,
    className: 'th-sm th-color cell_check hidden-xs',
    render: function (data) {
      return `
      <label id='lb_check_grupos_${data}' class='container_check' >
                <input id='check_grupos_${data}' type='checkbox' onclick="checkFilas('${data}');">
                <span class='checkmark'></span>
            </label>
      `;
    },
  },
  // desglose
  {
    type: 'html',
    orderable: false,
    targets: 1,
    className: 'cell_check text-center details-control',
    createdCell: function (td, cellData) {
      $(td).attr('GrupoID', cellData);
    },
    render: function (data) {
      return `
          <button id='btn_collapse_grupo_${data}' class='btn btn_expandir_empresa'>
            <span class='material-icons cerrado collapse in'>chevron_right</span>
            <span class='material-icons abierto collapse'>expand_more</span>
          </button>
      `;
    },
  },
  //Nombre
  {
    type: 'text',
    targets: 2,
    className: 'cell_nombre tdNombre',
    render: function (data, type, row) {
      let Nombre = '';
      if (data != undefined && data != '') {
        Nombre = RecortarCadenaTexto(data, 25);
      }
      return `<p class='edit'>${Nombre}</p>`;
    },
  },
  //Tipo
  {
    type: 'text',
    targets: 3,
    className: 'cell_tipo tdTipo',
    render: function (data, type, row) {
      let tipo = '';
      if (data != undefined && data != '') {
        tipo = RecortarCadenaTexto(data, 25);
      }
      return `<p class=''>${tipo}</p>`;
    },
  },
  //Telefono
  {
    type: 'html',
    targets: 4,
    className: 'cell_telefono tdTelefono',
    render: function (data, type, row) {
      return '<span>' + data + '</span>';
    },
  },
  //Fecha
  {
    type: 'num-fmt',
    targets: 5,
    className: 'cell_fecha tdFecha',
    render: function (data, type, row) {
      return '<span>' + data + '</span>';
    },
  },
  //Representatne
  {
    type: 'text',
    targets: 6,
    className: 'cell_representante tdRepresentante',
    render: function (data, type, row) {
      let Nombre = '';
      if (data != undefined && data != '') {
        Nombre = RecortarCadenaTexto(data, 25);
      }
      return `<p class=''>${Nombre}</p>`;
    },
  },
  //Numero Integrantes
  {
    type: 'text',
    targets: 7,
    className: 'cell_nIntegrante tdIntegrante',
    render: function (data, type, row) {
      return `<p class=''>${data} integrantes</p>`;
    },
  },
],});

después agrego el evento que escuchara cuando haga clic sobre fila donde quiero desplegar la nueva tabla

$('#dtGrupos tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
console.log(tabla);
var row = tabla.row(tr);
var GrupoId = $(this).attr('GrupoID');
var btnCollapse = '#btn_collapse_grupo_' + GrupoId;

if (row.child.isShown()) {
  row.child.hide();

  $(btnCollapse + ' .cerrado').addClass('in');
  $(btnCollapse + ' .abierto').removeClass('in');
} else {
  if (data.length > 0) {
    row.child(agregarTablaAsociada(GrupoId, data)).show();
    $(btnCollapse + ' .cerrado').removeClass('in');
    $(btnCollapse + ' .abierto').addClass('in');
  }
}});

y aquí es donde armo la nueva tabla que se desplegara sobre la tabla padre

agregarTablaAsociada(GrupoId, data)

pero necesito agregar una tercera tabla es donde ya no he encontrado algún ejemplo en la documentación, intente agregarla poniendo un listener igual pero en la respuesta obtengo que no accede a la api de datatable, dejo unas imágenes en donde se ven los niveles

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

ACTUALIZACION: anexo el Json que puedo recibir de donde podría sacar los N desligues de la tabla

    [
  {
    id: 1,
    nombre: 'Avamm',
    tipo: 'Grupo',
    Grupo: [
      {
        id: 1,
        nombre: 'Avamm',
        tipo: 'Grupo',
        subGrupo: [
          {
            id: 1,
            nombre: 'Avamm',
            tipo: 'Grupo',
            subGrupo: [
              {
                id: 1,
                nombre: 'Avamm',
                tipo: 'Grupo',
                telefono: '(913) 5735324',
                'fecha-alta': '12/12/2020',
                representante: 'Felice Knights',
                nIntegrante: 1,
              },
            ],
            telefono: '(913) 5735324',
            'fecha-alta': '12/12/2020',
            representante: 'Felice Knights',
            nIntegrante: 1,
          },
        ],
        telefono: '(913) 5735324',
        'fecha-alta': '12/12/2020',
        representante: 'Felice Knights',
        nIntegrante: 1,
      },
    ],
    telefono: '(913) 5735324',
    'fecha-alta': '12/12/2020',
    representante: 'Felice Knights',
    nIntegrante: 1,
  },
  {
    id: 2,
    nombre: 'Katz',
    tipo: 'Promotoria',
    telefono: '(958) 6833847',
    fechaAlta: '04/01/2021',
    representante: 'Robinetta Dreher',
    nIntegrante: 2,
  },
]
6
  • Parece que quieres hacer algo como lo de esta pregunta.
    – Triby
    Commented el 9 jul. 2021 a las 14:52
  • Creo que si es lo que busco amigo, déjame implementarlo e igual aquí comento la solución para que se quede como ayuda para las próximas personas con el mismo problema. Commented el 9 jul. 2021 a las 15:22
  • Creo que si es algo como lo que busco pero el detalle en esa respuesta es que se tiene que crear una función por cada desglose hijo que se tenga, no es de cierta forma dinámico, ya que recibo un objeto json que puede tener N desgloses Commented el 9 jul. 2021 a las 15:50
  • si, acabo de agregar el JSON, dentro del JSON hay subgrupos y estos subgrupos son los N desgloses que puede tener, que a su vez se traduce a que la tabla hija puede tener otra tabla hija y así sucesivamente dependiendo los subgrupos Commented el 9 jul. 2021 a las 16:17
  • 1
    Una idea sería crear una función recursiva, donde se obtenga el nivel actual, que servirá para asignar ID y clase de las nuevas tablas y celdas de control; creo que se puede con niveles infinitos y me gusta el reto. Veremos si el fin de semana puedo hacerlo.
    – Triby
    Commented el 9 jul. 2021 a las 17:16

1 respuesta 1

1

Como te había dicho en comentarios, hay que crear las tablas secundarias con una función aparte, escuchando todos los clics en celdas con clase detail-controls y creando la tabla secundaria con ID único, basado en ID de objeto y nivel.

Repites ID en objetos internos y supongo que es porque armaste el conjunto de datos solo como ejemplo, de lo contrario, podría darse el caso de IDs repetidos en tablas y provocar comportamientos inesperados.

Adicionalmente, agregué un par de opciones para ocultar encabezados de tablas secundarias y evitar mostrar botón de detalles cuando la fila no tiene grupo ni subgrupo; esta parte sería mejor hacerla con una clase CSS, pero ya te tocará ver cómo solucionarlo.

Revisa los comentarios en el código y no dudes en preguntar si algo no quedó claro.

let data = [
  {
    id: 1,              // Nivel 0
    nombre: 'Avamm',
    tipo: 'Grupo',
    Grupo: [
      {
        id: 1,             // Nivel 1
        nombre: 'Avamm',
        tipo: 'Grupo',
        subGrupo: [
          {
            id: 1,            // Nivel 2
            nombre: 'Avamm',
            tipo: 'Grupo',
            subGrupo: [
              {
                id: 1,
                nombre: 'Avamm',
                tipo: 'Grupo',
                telefono: '(913) 5735324',
                fechaAlta: '12/12/2020',
                representante: 'Felice Knights',
                nIntegrante: 1,
              },
            ],
            telefono: '(913) 5735324',
            fechaAlta: '12/12/2020',
            representante: 'Felice Knights',
            nIntegrante: 1,
          },
        ],
        telefono: '(913) 5735324',
        fechaAlta: '12/12/2020',
        representante: 'Felice Knights',
        nIntegrante: 1,
      },
    ],
    telefono: '(913) 5735324',
    fechaAlta: '12/12/2020',
    representante: 'Felice Knights',
    nIntegrante: 1,
  },
  {
    id: 2,
    nombre: 'Katz',
    tipo: 'Promotoria',
    telefono: '(958) 6833847',
    fechaAlta: '04/01/2021',
    representante: 'Robinetta Dreher',
    nIntegrante: 2,
  },
];

function format1(d) {
    // ID para sub tabla, el nivel se asignó antes de ejecutar esta función
    let id = 'example-' + d.id + '-' + d.level;

    // Asignar nivel en atributo de datos de la tabla
    let tabla = `<table id="${id}" class="table table-bordered table-hover" data-level="${d.level}">
                        <thead>
                            <tr>  
                                <th></th>                
                                <th>Nombre</th>
                                <th>Tipo</th>
                                <th>Teléfono</th>
                                <th>Fecha alta</th>
                                <th>Representante</th>      
                            </tr>              
                        </thead>
                        <tbody>
                        </tbody>
                    </table> `;
                    
    return $(tabla).toArray();                        
}

$(document).ready(function () {
    $('#example').DataTable({
        data: data,  
        columns: [          
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data" : "nombre" },
            { "data" : "tipo" },
            { "data" : "telefono"},
            { "data" : "fechaAlta" },
            { "data" : "representante" }               
        ],
        order : [[1, 'desc']],
        createdRow: detailsControl
    });

    
    // Crear subfilas en función separada
    // El clic puede ser en tabla principal o secundarias
    $('#example').on('click', 'td.details-control', childTable);
});

function childTable() {
    // Obtener fila, tabla y datos
    let tr = $(this).closest('tr');
    let table = $(tr).closest('table');
    let row = $(table).DataTable().row(tr);
    let rowData = row.data();
    
    // Buscar grupo o subgrupo
    let rowGroup = rowData.Grupo || rowData.subGrupo || null;
    if(!rowGroup) {
        // Esta fila no tiene información para subfilas
        return;
    }
    // Obtener nivel desde atributo de datos de la tabla
    let level = parseInt($(table).data('level')) || 0;
    // Incrementar nivel para asignar a tabla hija
    level ++;
    // ID para la tabla a crear
    let tbId = '#example-' + rowGroup[0].id + '-' + level;
    
    if(row.child.isShown()) {
        // Esta fila ya está abierta, cerrar
        row.child.hide();
        tr.removeClass('shown');
        $(tbId).DataTable().destroy();
        return;
    }
    // Asignar nivel en datos, para aplicarlo en atributo de datos de la tabla
    rowGroup[0].level = level;
    // Crear tabla y mostrar
    row.child(format1(rowGroup[0])).show();
    // Activar como DataTable, sin opciones
    $(tbId).DataTable({
        searching: false,
        bPaginate: false,
        info: false,
        ordering: false,
        data: rowGroup,  
        columns: [          
            {
                "className":      'details-control',
                "data":           null,
                "defaultContent": ''
            },
            { "data" : "nombre" },
            { "data" : "tipo" },
            { "data" : "telefono"},
            { "data" : "fechaAlta" },
            { "data" : "representante" }               
        ],
        order : [[1, 'desc']],
        createdRow: detailsControl
    });
    // Ocultar THEAD de tablas secundarias
    $(tbId).find('thead').hide();
    // Aplicar estilo a fila padre
    tr.addClass('shown');
        
}

// Ocultar botón cuando no hay grupo o subgrupo
function detailsControl(row, data, index) {
  // Ocultar botón cuando no hay grupo o subgrupo
  if(!data.hasOwnProperty('Grupo') && !data.hasOwnProperty('subGrupo')) {
    let td = $(row).find("td:first");
    // Solo se cambia el fondo, aunque sería mejor usar otra clase CSS
    td.css('background', '#fff');
  }
}
td.details-control {
    background: url(https://www.datatables.net/examples/resources/details_open.png) no-repeat center center;
    cursor: pointer;
    width: 30px;
    transition: .5s;
}

tr.shown td.details-control {
    background: url(https://www.datatables.net/examples/resources/details_close.png) no-repeat center center;
    width: 30px;
    transition: .5s;
}

table.dataTable td table.dataTable,
table.dataTable td table.dataTable * {
    border: none;
}
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

                    <table id="example" class="table table-bordered table-hover">
                        <thead>
                            <tr>  
                                <th></th>                
                                <th>Nombre</th>
                                <th>Tipo</th>
                                <th>Teléfono</th>
                                <th>Fecha alta</th>
                                <th>Representante</th>      
                            </tr>              
                        </thead>
                        <tbody>
                        </tbody>
                    </table>

1
  • Te agradezco mucho, estaré revisando el ejemplo Commented el 13 jul. 2021 a las 22:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.