Datatables warning (table id = 'ideas'): cannot reinitialise data table

Question

I am using data tables and am adding options to the JS code, the changes work but I keep on getting a popup warning. How can I stop the warning?

$(document).ready(function() {
    $('#ideas').dataTable( {
        "aLengthMenu": [[5, 10, 15, -1], [5, 10, 50, "All"]]
    });
});

Answer 1

If you just want to get rid of the alert box (eg "stop the warning") add this as the first line of your $(document).ready :

$.fn.dataTableExt.sErrMode = 'throw';

Now datatables will throw an error visible as "uncaught error: Datatables warning ..." in the console instead of the ugly alert-box.

However, you have an error in your code / data regardless the error now is thrown silently.

The error "DataTables warning (table id = 'XXX'): Requested unknown parameter 'XXX' from the data source for row X" is raised when there is a mismatch between the number of columns in the <table> and the number of columns in the data.

<thead>
  <th>col A</th>
  <th>col B</th>
</thead>

Inserting

<tr>
  <td>test test</td>
</tr>

or

<tr>
  <td colspan="2">test test</td>
</tr>

Would reproduce exactly that error. So examine your data again ..

Answer 2

You should use "bDestroy": true prop in order to populate table during post back

Answer 3

Did you populate the data dynamically? Then, move your script after the data is populated.

Something like,

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "sAjaxSource": "sources/arrays.txt",
        "aLengthMenu": [[5, 10, 15, -1], [5, 10, 50, "All"]]
    });
});

Answer 4

you should use "bDestroy": true.

Replace a DataTable which matches the given selector and replace it with one which has the properties of the new initialisation object passed. If no table matches the selector, then the new DataTable will be constructed as per normal.

$(document).ready(function() {
    $('#ideas').dataTable({
        "aLengthMenu": [[5, 10, 15, -1], [5, 10, 50, "All"]],
        "bDestroy": true 
    });
});

Also try this before creating the new datatable that destroy previous datatable objects.

$(document).ready(function() {
    $("#ideas").dataTable().fnDestroy();
    $('#ideas').dataTable({
        "aLengthMenu": [[5, 10, 15, -1], [5, 10, 50, "All"]]
    });
});