JQuery DataTables: ¿Cómo mostrar/ocultar detalles de fila con varias tablas?

Básicamente, estoy tratando de combinar el código de dos ejemplos dados en la documentación de DataTables. El primer ejemplo muestra cómo tener múltiples DataTables en una página, mientras que el otro le permite mostrar/ocultar detalles sobre cada fila.

Apliqué la clase "tabla de datos" a cada una de mis tablas generadas dinámicamente, por lo que el siguiente código las convierte todas en tablas de datos (y deshabilita la clasificación en la primera columna, ya que ahí es donde va el ícono de mostrar/ocultar):

var oTable = $('.dataTable').dataTable({
    "aoColumnDefs" : [ {
        "bSortable" : false,
        "aTargets" : [ 0 ]
    } ],
    "aaSorting" : [ [ 1, 'asc' ] ]
})

Luego agrego un detector de eventos para mostrar/ocultar la fila adicional de detalles cuando el usuario hace clic en la imagen en la primera columna:

$('.dataTable tbody td img').live('click', function() {
    var nTr = $(this).parents('tr')[0];

    if (oTable.fnIsOpen(nTr)) {
        /* This row is already open - close it */
        this.src = "../examples_support/details_open.png";
        oTable.fnClose(nTr);
    } else {
        /* Open this row */
        this.src = "../examples_support/details_close.png";
        oTable.fnOpen(nTr, fnFormatDetails(), 'details');
    }
});

El problema es que esto solo funciona para el primer DataTable en la página. Cuando hago clic en el ícono mostrar/ocultar en una fila en cualquier otra tabla, el ícono cambia, pero la fila de detalles no aparece. Más clics en el mismo icono no tienen ningún efecto. ¿Alguien tiene alguna idea de cómo mostrar/ocultar filas de detalles cuando se usan varias tablas de datos en una página? Aprecio tu ayuda.

preguntado el 03 de mayo de 12 a las 21:05

1 Respuestas

ya que estas definiendo

var oTable = $('.dataTable').dataTable( \\YOURSTUFF)`;

tu variable oTable tiene todas sus tablas de datos como su valor.

Lo único que tiene que hacer es obtener la tabla de datos que contiene el elemento en el que hizo clic. Puedes lograr esto agregando

tbl = $(this).parent().parent().dataTable();

a su función de clic y cambiar todo oTable llamadas a tbl.

Diviértete jugando con él ;-)

contestado el 11 de mayo de 12 a las 11:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.