Datatables: Cannot read property 'mData' of undefined

Question

I have an issue with Datatables. I also went through this link which didn't yield any results. I have included all the prerequisites where I'm parsing data directly into the DOM. Kindly help me to fix this issue.

Script

$(document).ready(function() {   $('.viewCentricPage .teamCentric').dataTable({     "bJQueryUI": true,     "sPaginationType": "full_numbers",     "bPaginate": false,     "bFilter": true,     "bSort": true,     "aaSorting": [       [1, "asc"]     ],     "aoColumnDefs": [{       "bSortable": false,       "aTargets": [0]     }, {       "bSortable": true,       "aTargets": [1]     }, {       "bSortable": false,       "aTargets": [2]     }],   }); }); 

Answer 1

FYI dataTables requires a well formed table. It must contain <thead> and <tbody> tags, otherwise it throws this error. Also check to make sure all your rows including header row have the same number of columns.

The following will throw error (no <thead> and <tbody> tags)

<table id="sample-table">     <tr>         <th>title-1</th>         <th>title-2</th>     </tr>     <tr>         <td>data-1</td>         <td>data-2</td>     </tr> </table> 

The following will also throw an error (unequal number of columns)

<table id="sample-table">     <thead>         <tr>             <th>title-1</th>             <th>title-2</th>         </tr>     </thead>     <tbody>         <tr>             <td>data-1</td>             <td>data-2</td>             <td>data-3</td>         </tr>     </tbody> </table> 

For more info read more here