detailed information in data table dont work when refreshing using ajax.

sexyGirl

I have implemented a Child rows (show extra / detailed information) data table plugin and works good; nevertheless, I update the table using Ajax, at first the table didn't charge but I read that adding the sentence 'destroy : true', the problem would be solved and it was true, but now when the table charges for the first time I can open and close details but if I refresh the table using ajax the table charges good but the details quit working.

What should I do?
Thank you :*

ThomD

When you recreate the table you probably need to reapply the event hook you are using.

sexyGirl

I have this code, the problem is that the second time the table charges the instruction "var row = table.row(tr);" and gives back an ´undefined´.

function refrescaTabla() {
var opt = $("#cmbAreasNegocio").val();
$.get("areasNegocios/" + opt + "/puestos", function(datos) {

    var table = $('#tblDocumentos').DataTable({
        destroy : true, 
        data : datos,
        "columns" : [ {
            "className" : 'details-control',
            "orderable" : false,
            "data" : null,
            "defaultContent" : ''
            },
            {"data" : "id"}, 
            {"data" : "nombre"}
        ],
        "order" : [ [ 1, 'asc' ] ]
    });

    // Add event listener for opening and closing details
    $('#tblDocumentos').on('click','tbody td.details-control', function() {
        var tr = $(this).closest('tr');
        var row = table.row(tr);
        alert(row.data());
        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            // Open this row
            row.child(format(row.data())).show();
            tr.addClass('shown');
        }
    });
});

}

function format ( d ) {
// d is the original data object for the row
var desc='

'; for(var i=0;i'+ ''+d.listPuestoTipo[i].id+''+ ''+d.listPuestoTipo[i].nombre+'' +''; } desc =desc+'

';
return desc;
}

ThomD

Try moving the on click code (line 17 ...) into the InitComplete option of your datatables declaration.

sexyGirl

thank you I'll try

sexyGirl

I found the problem!

a can't believe that the jquery's method "on" was the trouble
$('#tblDocumentos').on('click','tbody td.details-control', function(

finally i change my code for the version below and I add the instruction delete row.

// Add event listener for opening and closing details
        $('#tblDocumentos tbody td.details-control').click(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(format(row.data())).show();
                tr.addClass('shown');
            }
            delete row;
        });
    });