jquery datatable突出顯示下降後重新加載

Question

我有一個使用ajax加載值的數據表。

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'); 
    } 
}); 

使用setInterval，我要求該表每5秒重新加載一次。

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

當Datatable重新加載時，它將從高亮行中刪除。任何人都可以請告訴我如何在重新加載後保留行上的高光？

感謝

Answer 1

你可以做這樣的事情：

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); 

});