Hello, I am using jQuery datatable (little bit modified as in theme) in my project and getting error as below
Uncaught TypeError: Cannot read property 'mData' of undefined
at HTMLTableCellElement.<anonymous> (jquery.dataTables.min.js:91)
at Function.each (jquery-1.11.1.min.js:2)
at m.fn.init.each (jquery-1.11.1.min.js:2)
at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:91)
at Function.each (jquery-1.11.1.min.js:2)
at m.fn.init.each (jquery-1.11.1.min.js:2)
at m.fn.init.m [as dataTable] (jquery.dataTables.min.js:84)
at HTMLDocument.<anonymous> (Details?CustomerProfileID=101088&pv=False:1316)
at j (jquery-1.11.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-1.11.1.min.js:2)
Here is my javascript code:
var table = $('#dataTable');
var settings = {
"sDom": "<'table-responsive't><'row'<p i>>",
"destroy": true,
"autoWidth": false,
"scrollCollapse": true,
"oLanguage": {
"sLengthMenu": "_MENU_ ",
"sInfo": "Showing <b>_START_ to _END_</b> of _TOTAL_ entries"
},
"iDisplayLength": 5
};
table.dataTable(settings);
it works on other pages/table but not working for one table, what can be the cause of the issue, not able to understand it, my table html looks proper with
<tbody>
& <thead> t
ags
These can be the possible issues related to this error :
1.Table must contain <thead>
and <tbody>
tags, otherwise it throws this error, for example below table will throw error
<table id="erroTable">
<tr>
<th>Test</th>
<th>Test2</th>
</tr>
<tr>
<td>Data-1</td>
<td>Data-2</td>
</tr>
</table>
<!--Error may occur because of no tbody and thead defined-->
2. Mismatched number of columns(this table will also throw error) :
<table id="ErrorTable">
<thead>
<tr>
<th>Test</th>
<th>Test2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ok-1</td>
<td>ok-2</td>
<td>Error because of this extra value</td>
</tr>
</tbody>
</table>
3.It can also occur if you have table arguments for 'aoColumns':[..]
which don't match the correct number of columns, means may be you have defined aoColumns for 4 columns but there are only 2 columns in table.
4.Could occur due to Duplication of table Id(two table with same Ids)
Most of the times, this error occurs when number of columns in <thead> <th>
is different than
<tbody> <tr> <td>
But it can also occur if number of columns in 'aoColumns':[ ]
does not have the correct number of columns.
For example, this configuration will not work
<table id="datatable">
<thead>
<tr>
<th>col 1</th>
<th>col 2</th>
</tr>
</thead>
<tbody>
<td>data 1</td>
<td>data 2</td>
</tbody>
</table>
<script>
var datTable = $('#datatable');
datTable.DataTable({
'order': [[ 1, 'desc' ]],
'aoColumns': [
null,
null,
null,
null,
{
'bSortable': false
}
]
});
</script>
But this will work:
<table id="datatable">
<thead>
<tr>
<th>col 1</th>
<th>col 2</th>
</tr>
</thead>
<tbody>
<td>data 1</td>
<td>data 2</td>
</tbody>
</table>
<script>
var datTable = $('#datatable');
datTable.DataTable({
'order': [[ 1, 'desc' ]],
'aoColumns': [
null,
{
'bSortable': false
}
]
});
</script>
Hope this helps.
Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly