Jquery datatables destroy/re-create

Question

I am trying to reload a datatable via a json call. I've using DataTables-1.10.9 and jquery-2.1.4.

I've tried paying with the .ajax API within datatable and got nowhere, so I thought I'd try this approach which I have sued in the past.

If I break when the HTML has been appended to the table, it looks OK (by this, I mean that the old data has been removed, and the new data is showing. But when the $('#tblRemittanceList').dataTable({...}); command is issued again, it 'reloads' the old data, not the new. If I don't use datatables, the raw table shows the correct data.

//----------------------------------------------------------------------------------------
function fncOpenRemittancesRead(pFrRem,pToRem) {

    wsUrl = "../Json/OpenRemittances.asp"   +
                    "?qryDatabase="         + encodeURIComponent(wsDatabase)    +
                    "&qryFrRemittance=" + encodeURIComponent(pFrRem)            +
                    "&qryToRemittance=" + encodeURIComponent(pToRem);

    $('body').addClass('waiting');
    $.getJSON(wsUrl, function(data) {
        fncOpenRemittancesFill(data);
        $('body').removeClass('waiting');
    });
}

//----------------------------------------------------------------------------------------
function fncOpenRemittancesFill(pData) {
    var wsHtml = '';

    $('#tblRemittanceList tbody').empty();

    for (var i = 0; i < pData.length; i++) {
        wsHtml += '<tr>';
        wsHtml += '<td>' + trim(pData[i].col_1) + '</td>';
        wsHtml += '<td>' + trim(pData[i].col_2) + '</td>';
        wsHtml += '<td>' + trim(pData[i].col_3) + '</td>';
        wsHtml += '<td>' + fncFormatDate(pData[i].col_4,4) + '</td>';
        wsHtml += '<td>' + fncFormatNumber(pData[i].col_5,2,"N") + '</td>';
        wsHtml += '<td>' + trim(pData[i].col_6) + '</td>';
        wsHtml += '<td>' + fncFormatNumber(pData[i].col_7,2,"N") + '</td>';
        wsHtml += '<td>' + trim(pData[i].col_8) + '</td>';
        wsHtml += '</tr>';
    }

    $('#tblRemittanceList > tbody:last').append(wsHtml);

    $('#tblRemittanceList').dataTable({
          "autoWidth":false
        , "destroy":true
        , "info":false
        , "JQueryUI":true
        , "ordering":true
        , "paging":false
        , "scrollY":"500px"
        , "scrollCollapse":true
    });

}

Areg · Accepted Answer · 2019-11-06 17:04:18Z

101

CAUSE

When DataTables destroys the table because of the option destroy:true it restores original content and discards the content that you've generated.

SOLUTION #1

Remove destroy:true option and destroy the table before you manipulate the table with destroy() API method.

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

$('#tblRemittanceList tbody').empty();

// ... skipped ...

$('#tblRemittanceList').dataTable({
      "autoWidth":false, 
      "info":false, 
      "JQueryUI":true, 
      "ordering":true, 
      "paging":false, 
      "scrollY":"500px", 
      "scrollCollapse":true
});

SOLUTION #2

Remove destroy:true option and instead of destroying and recreating the table use clear() to clear the table content, rows.add() to add the table data and then draw() to re-draw the table.

In this case you would need to initialize DataTables once on page initialization.

edited Nov 6, 2019 at 17:04

Areg

1,5381 gold badge23 silver badges46 bronze badges

answered Sep 22, 2015 at 14:00

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Keith Over a year ago

Great answer. Thanks for your help. I used the clear(), rows.add() and then draw() methods, as this will be more efficient I guess.

PlayHardGoPro Over a year ago

I know it's old but anyone could explain to me that $.fn ? It worked, although it gives me sometimes "unable to read property 'style' of undefined'

Tonmoy Nandy Over a year ago

Solution 2 is working for me, and it's very easy to use

OHM Over a year ago

Addition to SOLUTION #1: if you are re-initializing a completely new table having different columns, cleaning the table elements would create the data table without any issue $("#tblData tbody, #tblData tfoot").remove(); $("#tblData thead tr").empty();

pushkin · Accepted Answer · 2018-09-11 21:41:07Z

15

You can initialize your datatables using the retrieve option like this:

var table = $('#myTable').DataTable( {
                        dom: 'Bfrtip',
                        retrieve: true, ...

Than you have to clear and destroy it:

$('#myTable').DataTable().clear().destroy();

By the last you recreate your datatables:

 var table = $('#myTable').DataTable( {
                        dom: 'Bfrtip',
                        retrieve: true,

Check the Retrieve tutorial here: https://datatables.net/reference/option/retrieve

edited Sep 11, 2018 at 21:41

pushkin

10.4k16 gold badges65 silver badges112 bronze badges

answered Sep 11, 2018 at 21:24

Dierp

3212 silver badges5 bronze badges

2 Comments

bdalina Over a year ago

this is perfect

Newclique Over a year ago

I will tell you that this did not work for me and I could not understand why. So, I put a breakpoint on the line where the table was supposed to be getting re-created, using the same settings object as the first create but with the .data property updated. Well, here's what's happening. DataTables is creating a new property called aaData that has the original set of data! This is what is used to recreate the table. Grrr! Once I set aaData to equal my latest set of data, problem solved. This ridiculous, undocumented approach cost me (my customer) 8 hours.

Jasbin Karki · Accepted Answer · 2019-08-11 16:56:38Z

just use destroy() method to destory the table like this:

$('#experience-table').DataTable().destroy();

and re-initialise it like this example:

var table= $('#experience-table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: '{{url('employee/experience/list/experience')}}'+'/'+emp_id,
                    columns: [
                        { data: 'emp_no', name: 'emp_no' },
                        { data: 'position', name: 'position' },
                        { data: 'organization', name: 'organization' },
                        { data: 'duration', name: 'duration' },
                        { data: 'action', name: 'action' },
                    ],
                    searching: false


                });

double-beep · Accepted Answer · 2019-05-22 10:34:10Z

1

datatable refresh
$('#Clienttbl').dataTable().fnClearTable();

edited May 22, 2019 at 10:34

double-beep

5,67019 gold badges43 silver badges50 bronze badges

answered May 22, 2019 at 10:26

Jaydeepsinh Makwana

392 bronze badges

3 Comments

Volomike Over a year ago

fnClearTable() is not a function, and .dataTable() should be .DataTable(), regardless. Perhaps you were confused with another library?

NZT Over a year ago

dataTable() is legacy library for DataTable().

Geoduck Over a year ago

@Volomike I think you are confused. OP used .dataTable(), which has a function called fnClearTable(). It's the legacy naming for DataTable() and they can be used together in many, but not all, ways

Collectives™ on Stack Overflow

Jquery datatables destroy/re-create

4 Answers 4

CAUSE

SOLUTION #1

SOLUTION #2

4 Comments

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

CAUSE

SOLUTION #1

SOLUTION #2

4 Comments

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related