DataTables Uncaught TypeError: Cannot set property '0' of undefined

Question

I have a repeater and wrap it all with DataTables library. Here is the following js function.

function createDataTable() {
    $(document).ready(function() {
        $('#tblMessages').dataTable({
            "sPaginationType": "full_numbers",
            "sDom": '<"clreol"lf><"scrollable_datatable"rt><"clreol"ip>',
            "bPaginate": true,
            "bLengthChange": false,
            "bFilter": true,
            "bInfo": false,
            "bAutoWidth": false,
            "bAutoHeight": false,
            "bSort": false,
            "bStateSave": true,
            "iCookieDuration": 60*60*24
        });
    });
}

I got no pagination at all just scroll bar on the right side of the repeater. And I got this on console:

Uncaught TypeError: Cannot set property '0' of undefined jquery.dataTables.min.js:366
Y                                                        jquery.dataTables.min.js:366
(anonymous function)                                     jquery.dataTables.min.js:454
jQuery.extend.each                                       jquery.min.js:21
jQuery.fn.jQuery.each                                    jquery.min.js:12
i.fn.dataTable                                           jquery.dataTables.min.js:434
(anonymous function)                                     Message.aspx:156
jQuery.fn.extend.ready                                   jquery.min.js:26
createDataTable                                          Message.aspx:152

What's wrong? And what should I do?

Answer 1

Check your table structure:

• Number of columns (th) in thead section must equal number of columns (td) in tbody section. See manual for proper HTML structure.

• If you're using colspan or rowspan attributes for th elements in thead section, make sure that each column has one unique th element. See this example for more info and demonstration.