DataTables issue: VM9075 dataTables.min.js:24Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined

Question

I just started using DataTables and everything works fine when creating the table.

When I display 5, 24, 47 rows in my table, DataTables behaves as I would expect.

But I have this table that has around 700 rows and I get the error in Google Chrome,

"VM9075 dataTables.min.js:24Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined "

and in IE 9,

"SCRIPT5007: Unable to set value of the property '_DT_CellIndex': object is null or undefined 
jquery-1.10.2.min.js, line 4 character 2367"

I don't have jQuery included twice btw.

I'm not sure how to proceed from here.

I tried to use the unminified version of the .js file to debug it more myself but i kept getting an "ext" method or property is undefined and couldn't fix that either.

Any help is appreciated!

Answer 1

Ran into this same issue and implemented this same solution (essentially) in jquery based on Coty's. Hope this helps someone. :)

$( '.table' ).each(function( i ) { 

    var worktable = $(this);
    var num_head_columns = worktable.find('thead tr th').length;
    var rows_to_validate = worktable.find('tbody tr');

    rows_to_validate.each( function (i) {

        var row_columns = $(this).find('td').length;
        for (i = $(this).find('td').length; i < num_head_columns; i++) {
            $(this).append('<td class="hidden"></td>');
        }

    });

});

Answer 2

As answered by Coty, the problem lies in the mismatch of td elements generated in the header and body of table.

I'd like to highlight one of the reasons why it can occur (For .Net Users). If Page numbers are being displayed at the end of gridview, they can disrupt table structure.

Remove AllowPaging="true" from your gridview to solve this. And no worries because Datatable handles Paging.