重新加载后jquery datatable突出显示下降

Question

I have a datatable which uses ajax to load the values.

var table = $('#example').DataTable({
    "ajax": "xxxxxx.aspx",
    stateSave: true,
        "aLengthMenu": [
        [10, 25, 50, 100],
        [10, 25, 50, 100]
    ],
        "iDisplayLength": 25,
        "order": [
        [0, "desc"]
    ],
    columnDefs: [{
        "visible": false,
        "targets": [2, 3]
    }, {
        "type": 'date-uk',
        "targets": [1, 9, 10]
    }, {
        "type": 'title-string',
        "targets": [11]
    }],
});

$('#example tbody').on('click', 'tr', function () {
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
    } else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }
});

using setInterval, I am asking that table to be reloaded every 5 secs.

setInterval(function(){table.ajax.reload(null, false)}, 5000);

When the Datatable is reloaded, it drops off the highlight row. Can anyone please tell me how to retain the highlight on the row after the reload?

Thanks

Answer 1

You could do something like that :

function highlight() {
    $('#example tbody').on('click', 'tr', function () {
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
        } else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    });
}

$(document).ready(function () {

    // Call the function at document ready
    highlight();

    // Call the ajax and the function every 5 seconds
    setInterval( function () {
        table.ajax.reload(null, false);
        highlight();
    }, 5000 );

});