How to reload table in Datatables.js source javascript function

Question

I have an issue with Datatables where I have a function that builds an array of data to feed into DataTables. However at the end of a row is a cell with a button if that button is pressesed it removes this row from the data that the function just pulled from (sharepoint list).

Now I could just refersh the whole page but that is slow and cluncky.

If I make the button re-run the function I get a DataTables warning:table id=Ttable2 -Cannnot reinitialise DataTables

This is my code currently it doesn't tell much, Tbarray is large and not much point i writing it out.

$("#tbBody2").empty();
var table = $('#Ttable2').DataTable({
    data: Tbarray,
    scrollY:"475px",
    scrollCollapse: true,

    });

Edit

function BuildSR(Tbarray){

    if ($.fn.DataTable.isDataTable('#Ttable2')) {
        table.destroy();
    }

    var table = $('#Ttable2').DataTable({
        destroy: true,
        data: Tbarray,
        scrollY:"475px",
        scrollCollapse: true,
    });

    table.draw();

}

Answer 1

The easiest way is to destroy and reinitialize the dataTable.

1. check if dataTable is already initialized, if so - destroy it:

edited

//globally initialize var table first
var table;

if (  $.fn.DataTable.isDataTable( '#Ttable2' ) ) {
    table.destroy();
}

2. Then do the initialize with option destroy: true

table = $('#Ttable2').DataTable({
destroy: true,
data: Tbarray,
scrollY:"475px",
scrollCollapse: true,
});
table.draw();

Answer 2

I would recommend to clear() all table entries and re-populate the table with up to date data, using rows.add() method:

$('#Ttable2').clear().rows.add(Tbarray).draw();

That should be much faster than destroying and re-initializing DataTable.