Saltar al contenido

DataTables: no funciona cuando se agrega colspan para la última columna

Posterior a de nuestra larga selección de datos hemos podido solucionar este atascamiento que pueden tener muchos de nuestros lectores. Te dejamos la respuesta y nuestro objetivo es resultarte de mucha apoyo.

Solución:

DataTables no admite colspans como si los estuviera usando. Siga su ejemplo de encabezado complejo en su lugar.

Cuando utilice tablas para mostrar datos, a menudo deseará mostrar la información de las columnas en grupos. DataTables es totalmente compatible con colspan y rowspans en el encabezado, asignando los oyentes de clasificación requeridos al elemento TH adecuado para esa columna. Cada columna debe tener una celda TH (y solo una) que sea única para que se agreguen los oyentes. El ejemplo que se muestra a continuación tiene la información principal del navegador agrupada.


    
        Rendering engine
        Browser
        Details
    
    
        Platform(s)
        Engine version
        CSS grade
    

Su equivalente sería algo como esto:


      
      

      
      
  
 
      
      

      
      
 

dataTable no admite colspan o rowspan.

Si usa un colspan, dataTable no entenderá el conteo/cálculo de las columnas, devolviendo indefinido y arrojando un error en ese caso.

Entonces, lo que debemos hacer es decirle a dataTable que, en caso de que no obtenga el resultado esperado, cuál debería ser la alternativa.

Para eso usaremos: la propiedad defaultContent y, por supuesto, especificando los objetivos/columnas afectadas.

Por ejemplo: en una mesa con 3 tdes si usamos td colspan=”2″tendremos que establecer los valores predeterminados para los otros 2 (porque uno ya existe, y es el primero).

Código:

"aoColumnDefs": [
  "aTargets": [2,3],
  "defaultContent": "",
]

Un método alternativo es utilizar Child rows. Esto eventualmente agregará una fila debajo del padre como se muestra en la imagen a continuación

ingrese la descripción de la imagen aquí

Código

var table =jQuery('#bwki_sites_display').DataTable( 
    'pageLength': 10,
    'lengthMenu': [ 10, 20, 50, 100, 200 ],
    'order': [[ 0, 'desc' ]],

    
);
table.rows().every( function () 
    var row = table.row( $(this));
    html = 'Colspan will come here';              
    row.child(html).show();
    $(this).addClass('shown');                                              
);

valoraciones y comentarios

Tienes la opción de animar nuestra faena ejecutando un comentario o puntuándolo te damos la bienvenida.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *