CODEWITHSUNDEEP
jquerydatatables
steve0nz
steve0nz

Reputation: 906

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

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

enter image description here

Upvotes: 9

Views: 13462

Answers (4)

Divyesh Kanzariya
Divyesh Kanzariya

Reputation: 3789

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

Upvotes: 0

davidkonrad
davidkonrad

Reputation: 85538

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

Upvotes: 10

user2481943
user2481943

Reputation: 11

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

Upvotes: 1

yeyene
yeyene

Reputation: 7380

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

Upvotes: 0

Related Questions