如何重新初始化数据表？

Question

I have a page with notifications on it which I want to refresh every 10 seconds, but I don't want to reload the entire page, just the reload the div that contains the notifications. The notifications themselves are in a datatable, which is initialised when the page is loaded, but I've been unable to get it to reinitialise the datatable when the div is reloaded. The div reloads fine but is then just a normal table. Here is my code:

$(document).ready(function () {
    loadNotificationsTable();
});

setInterval(reloadNotificationsTable, 10000);

function reloadNotificationsTable() {
    $('#NotificationsTable').dataTable().fnDestroy();

    $("#notificationsPlaceholder").load(location.href + " #notificationsPlaceholder>*", "");

    $("#notificationsPlaceholder").ready(function () {

        loadNotificationsTable();
    });
};

function loadNotificationsTable() {
    $('#NotificationsTable').dataTable({
        ajax: "data.json",
        "bLengthChange": false,
        'iDisplayLength': 1000,
        "bSort": false,
        "bFilter": false,
        "sDom": 'ft<"bottom"ilp>',
        "bDestroy": false,
        "bPaginate": false,
        "bInfo":false
    });
};

Is anybody able to help me and show me what I'm doing wrong?

Answer 1

Try re-initializing the datatable after load has finished in a callback:

$("#notificationsPlaceholder").load(location.href + " #notificationsPlaceholder>*",function(data){
    loadNotificationsTable();
});

Also add this to your initialization code since you want to replace the table

https://legacy.datatables.net/ref#bDestroy

"bDestroy": true,

Answer 2

If you need to refresh the table at a regular interval of time then use this:

$('#table_id').DataTable().ajax.reload();

Use this code with setTimeout() function to refresh the datatable at a regular interval of time.