Cannot reinitialise DataTable - dynamic data for datatable

问题

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.

回答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
});

回答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.

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
} );

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.

回答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" 
} );

回答4:

Try something like below

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


    $table.fnDestroy();

来源：https://stackoverflow.com/questions/24545792/cannot-reinitialise-datatable-dynamic-data-for-datatable

标签

jquery

ajax

dynamic

datatable

destroy