How can I keep child rows opened after the Ajax reload

Alex67000

I'm using an Ajax source to generate the table. This one is refreshed every 5000 ms and when a child row is opened it's then closed by the table's redraw. How can I keep these ones opened?

http://datatables.net/examples/ajax/objects.html
http://datatables.net/examples/api/row_details.html
https://datatables.net/reference/api/ajax.reload()

Alex67000

I succeeded to keep child rows opened. But now I'm stuck to close them: I cannot close the opened row child by clicking on the same td.details-control (which open and should close the row child) but the opened row child is closed after that I click on another td.details-control (so after that I open another row child).

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<p>Text in child row</p>';
}

$(document).ready(function() {
    $('#table').DataTable( {
    ...         
    } );

var tr;
var row;

$('#table tbody').on('click', 'td.details-control', function () {

    if (tr !== null && tr !== undefined && row !== null && tr !== undefined) {
        row.child.hide();
        tr.removeClass('shown');            
    }

    tr = $(this).closest('tr');
    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');
    }

} );

$.fn.dataTable.ext.errMode = 'none';    
var table = $('#table').DataTable();
setInterval( function () {
    table.ajax.reload( function () {
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {          
            if (tr.hasClass('shown')) {
                // Open this row
                row.child( format(row.data()) ).show();
                tr.addClass('shown');                       
            }
        }
    } );
}, 5000 );  

$('table td .details-control').html('<button><i class="fa fa-plus"></i></button>');

} );

Alex67000

The problem is here: (I shall work on the condition but tried 10 000 things, and still stuck)

if (tr !== null && tr !== undefined && row !== null && tr !== undefined)
{

    row.child.hide();
    tr.removeClass('shown');  

}

Because the row.child.hide(); I am stuck in the open this row condition and this code is there to close the previous row child and open the new one (but if I stay on the same row and I click on the button, it's not closed)

duselguy

Twice tr !== undefined in the condition above.

Alex67000

Yeah.