Jquery Datatable Gives Error When Recreating Datatable: Typeerror: T[c] Is Undefined

I have a function that creates a datatable. On page load the datatable is created and drawn. Now, when I have a form submit to make a search on a table, I call the same function. F

Solution 1:

Ok, I actually solved this problem! So there is a bug (feature ?? ) in the datatable.js plugin. When it tries to autowidth the columns, it needs to have as many headers as there are data columns defined. So if you have 7 column definitions and you have only 5 headers defined, the code will fail with a null pointer exception. One way to work around this is to set the autowidth parameter to false (by default it is true).

functionUpdateTableCompany(val, search_field)
    {

        var table = $('#tablePubDev').DataTable({
            'destroy': true,
            searching: false,
            'info': false,
            paging: true,
            retrieve: false,
            processing: true,
            "autoWidth": false, // This parameter must be set to false
          ......

By doing this you avoid the call to the functon which actually tries to do the autowidth. So by avoiding that part of the datatable code, you wont have the error described.

Solution 2:

Instead of recreate the table every time you click the #search_form button, you should only reload the table datasource. Try the following:

First, let's change your function a little, so it will not be used to update your table anymore, but to create it (it will be called only once). Remove the search parameters as follows:

from function UpdateTableCompany(val, search_field)

to function UpdateTableCompany()

you may want to rename your function as well:

function CreateTableCompany() {
...

Now, Inside your "ajax" function, change the way you obtain the values. Make it get the values dinamically, something like:

d.val = $('#val').val().trim();d.search_field = $('#search_field').val().trim();

Now you need to create your table variable outside the load scope, so it can be accessed from other functions:

var table;
$(window).load(function () {
    table = CreateTableCompany();
...

Finally, remove the content of the submit function (except the e.preventDefault();)

It should look like this:

$("#search_form").submit(function (e) {
    e.preventDefault();
    table.ajax.reload();
});

I think this will do the trick. I hope it helps.

Solution 3:

Sometimes this error can be occurred due to difference in no of columns of in thead and datatable columns.