DataTables: re-open collapsed child rows on ajax.reload

Question

I am trying to re-open my child rows when the table automatically reloads with the ajax.reload function of dataTable. (this will cause all the child rows to collapse)

I found the following code on internet and tried to implement it. But it isn't working for me. https://datatables.net/forums/discussion/40777/statesave-type-option-for-child-row-state-class-of-open-row

When the table reloads, the following error appears in my browser console log.

TypeError: openTableRows is null

Hopefully someone can help me or point me in the right direction.

<script>
var $tagsLabel = $("<lable>");
var $tagsInput = $("<textarea>");

/* Formatting function for row details - modify as you need */
function format(d) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
        '<tr>' +
        '<td>Raw text:</td>' +
        '<td>' + d.Raw_html + '</td>' +
        '</tr>' +
        '</table>';
}

$(document).ready(function () {
        $table = $("#dataTable")
            .on("preInit.dt", function (e, settings) {
                $tagsLabel.append($tagsInput);
                $('.dataTables_tags').append($tagsLabel)
            })
            .on("init.dt", function (e, settings) {
                $tagsInput.tagEditor({
                    delimiter: ', ',
                    placeholder: 'Enter search keywords ...',
                    onChange: function (field, editor, tags) {
                        if (tags.length) {
                            if (tags.length > 1) {
                                $table.search(tags.join('|'), true, false).draw();
                            } else {
                                $table.search(tags[0]).draw();
                            }
                        } else {
                            $table.search('').draw(true);
                        }
                    },
                });
            }).DataTable({
                mark: true,
                "searchHighlight": true,
                "dom": '<l<"dataTables_tags"><t>ip>',
                "ajax": '/json-int',
                "columns": [
                    {
                        "class": 'details-control',
                        "orderable": false,
                        "data": null,
                        "defaultContent": '',
                        width: "5px"
                    },
                    {"data": "Timestamp", width: "135px"},
                    {"data": "Title"},
                    {"data": "Url"},
                    {"data": "domain"},
                    {"data": "Type"},
                    {"data": "Raw_html", "visible": false}
                ],
                "order": [[1, 'asc']],
                "initComplete": function () {
                    setInterval(function () {
                        $table.ajax.reload(null, false);

                        var currentdate = new Date();
                        var datetime = currentdate.getDay() + "/" + currentdate.getMonth()
                            + "/" + currentdate.getFullYear() + " @ "
                            + currentdate.getHours() + ":"
                            + (currentdate.getMinutes() < 10 ? '0' : '') + currentdate.getMinutes() + ":" + currentdate.getSeconds();
                        document.getElementById("lastUpdated").innerHTML = "Last updated: " + datetime;
                    }, 5000);
                }
            });

        var openTableRows = JSON.parse(localStorage.getItem('openRows'));

        $('#dataTable tbody').on('click', 'td.details-control', 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');

                rowIndex = row[0][0];
                var idx = openTableRows.indexOf(rowIndex);
                openTableRows.splice(idx, 1);
                localStorage.setItem('openRows', JSON.stringify(openTableRows));
                console.log(JSON.parse(localStorage.getItem('openRows')));

            } else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');

                rowIndex = row[0][0];
                openTableRows.push(rowIndex);
                localStorage.setItem('openRows', JSON.stringify(openTableRows));
                console.log(JSON.parse(localStorage.getItem('openRows')));
            }
        });
    }
);

Answer 1

By chance, have you checked the official manual in that regard?

Provided code sample obviously solves your problem. For your particular datatable

$(document).ready(function() {
    var dt = $('#example').DataTable( {
...
})

Keep track of ID's of expanded rows

// Array to track the ids of the details displayed rows
    var detailRows = [];

    $('#example tbody').on( 'click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );
        if ( row.child.isShown() ) {
            ...     
            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        }
        else {
            ...
            // Add to the 'open' array
            if ( idx === -1 ) {
                detailRows.push( tr.attr('id') );
            }
        }
    } );

Reopen expanded rows each time you redraw datatable / invoke ajax.reload

// On each draw, loop over the `detailRows` array and show any child rows
    dt.on( 'draw', function () {
        $.each( detailRows, function ( i, id ) {
            $('#'+id+' td.details-control').trigger( 'click' );
        } );
    } );