Reload dataTable from variable

Question

I searched all over web and I didn't find easy solution for this. I'm using jQuery DataTables with "static" data source (one var is filled with data using SignalR and then later, DataTable is built). Now, when change of this dataset comes, I want to update table using this data set. Ideally, that would be simple "refresh" which reloads data from specified source. Here is my HTML

<table class="table table-hover table-condensed table-responsive" id="tableAccounts">
        <thead>
            <tr>
                <th data-localize="_A_C">_A_C</th>
                <th data-localize="_Name">_Name</th>
                <th data-localize="_Address">_Address</th>
                <th data-localize="_City">_City</th>
                <th data-localize="_Phone">_Phone</th>
            </tr>
        </thead>
      <tbody></tbody>

And here is my javascript which initially loads data:

tAccounts = $('#tableAccounts').dataTable({
            "data": AccountAll,
            "bFilter": true,
            "pageLength": 100,
            "bSearchable": true,
            "bInfo": false,
            "columns": [
                { "data": "AccountCode" },
                { "data": "Name" },
                { "data": "Address" },
                { "data": "City" },
                { "data": "Phone" }
            ],
            "columnDefs": [
               {
                   "render": function (data, type, row) {
                       return ("0000" + data.toString(16)).slice(-4);
                   },
                   "targets": 0
               },
               { "visible": true, "targets": [0] }
            ]
        });

tl;dr;

How to refresh datatable when data source (AccountAll in this case) is changed without destroying whole table? Bonus point if selection and filter is preserved.

Change can be anything. New row added, row removed, cell value changed.

Answer 1

You can use combination of clear() and rows.add() API methods to clear existing data and add updated data.

In this case filtering and sorting would be preserved.

If you want to preserver the current page, call draw(false) instead of draw() but if you're adding new rows, there is little sense in preserving the current page

For example:

var data = [['old',2,3,4,5,6]];

var table = $('#example').DataTable({
    'data': data
});

var dataNew = [['new',2,3,4,5,6]];
table.clear().rows.add(dataNew).draw();

See this example fro code and demonstration.