Cannot reinitialise DataTable - dynamic data for datatable

Question

I have a datatable showing all employees. It is working fine for all employees on document.ready. I have a select tag containing the type of employees like 'project_manager' & 'team_leader' , and on change of employee type I am calling a function get_employees(emp_type) and passing the selected employee type.

It is getting desired and proper data in ajax response, but throwing warning

DataTables warning: table id=example - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

I tried to destroy it, but no luck.

also tried for

$('#example').dataTable().fnClearTable();
$('#example').dataTable().fnDestroy();

it is clearing table and showing newly appended data, but adding new sort images with column name every time.

Here is my code snippet.

$(document).ready(function() {
            get_employees('all');
        });

        function get_employees(emp_type)
        {
            $.ajax({
                url: '../ajax_request.php',
                type: "POST",
                data: {
                    action: "admin_get_all_employees",
                    type: emp_type
                },
                success: function(response) {
                    var response = jQuery.parseJSON(response);

                    // $('#example').destroy(); tried this but haven’t worked

                    $('#example').dataTable({
                        "aaData": response.data,
                    });
                }
            });
        }

Thanks in advance.

Hexylresorcinol

Answer 1

In the current version of DataTables (1.10.4) you can simply add destroy:true to the configuration to make sure any table already present is removed before being re-initialised.

$('#example').dataTable({
    destroy: true,
    aaData: response.data
});

Yeti

This answer is the best ! As Coin_op said : JUST ADD " destroy: true, " – Witte

I used clear() but did not work. This is the best answer for sure. – Lanceolate

I like it when answers force me to log in and comment thank you. – Formyl

Answer 2

This tech note section from datatables explains the reason for this warning. Relevant information from there:

This error is triggered by passing in options to a DataTables constructor object when the DataTable instance for the selected node has already been initialised. For example:

$('#example').dataTable( {
    paging: false
} );


$('#example').dataTable( {
    searching: false
} );

The above documentation explains two ways to deal with this.

1. Retrieve: It explains how to apply additional options after the initialization (works even if it is not initialized before) by using setting retrieve to true as follows:

table = $('#example').DataTable( {
    retrieve: true,
    paging: false
} );

2. Destroy: In this case you can destroy the object explicitly by calling table.destroy(); and then creating the table again. Or you can simply pass destroy: true option as mentioned in the accepted answer.

   table = $('#example').DataTable( {
       paging: false
   } );
   
   table.destroy();
   
   table = $('#example').DataTable( {
       searching: false
   } );
   

Using destroy:true option:

$('#example').DataTable( {
    destroy: true,
    searching: false } );

Note: This error may also occur if you include your javascript file that creates the dataTable multiple times. I was using apache tiles and included it in base as well as extended definition which also resulted in this error.

Pinfish

Answer 3

This helped me:

var table = $('#example').DataTable( {
    // Clear previous data
    destroy: true,
    // Load new data with AJAX from data.json file.
    ajax: "data.json" 
} );

Stove

Answer 4

Try something like below

    var $table=$('#example').dataTable({
                    "aaData": response.data,
                });


    $table.fnDestroy();

Vladimir

Answer 5

All other answers is only working when you know the instance. If you don't know where is the js file contain js code to apply datatable onto your html table, so you don't know the datatable instance, so all other answers is not working for u.

The best way is to delete datatable class from your html table. Eg :

<table class="datatable" id="maintable"></table>

Then manually initialize apply datatable to your table by jquery :

$(document).ready(function () { 
    $('#maintable').dataTable({
        //put all your datatable config and setting and filter here.
    });
})

Mart