0x800a138f - JavaScript runtime error: Unable to get property 'mData' of undefined or null reference
I am using Datatables version 1.10.6. In jquery.dataTables.js i am getting above error.
0x800a138f - JavaScript runtime error: Unable to get property 'mData' of undefined or null reference.
$.each( _fnGetRowElements( oSettings, rowOne[0] ).cells, function (i, cell) {
var col = oSettings.aoColumns[i];
if ( col.mData === i ) {// this line gives error
var sort = a( cell, 'sort' ) || a( cell, 'order' );
var filter = a( cell, 'filter' ) || a( cell, 'search' );
if ( sort !== null || filter !== null ) {
col.mData = {
_: i+'.display',
sort: sort !== null ? i+'.@data-'+sort : undefined,
type: sort !== null ? i+'.@data-'+sort : undefined,
filter: filter !== null ? i+'.@data-'+filter : undefined
};
_fnColumnOptions( oSettings, i );
}
}
} );
}
In MVC i am using :
<script type="text/javascript">
$(document).ready(function () {
// Setup - add a text input to each footer cell
$('#example tfoot th').each(function () {
var title = $('#example thead th').eq($(this).index()).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
// DataTable
var table = $('#example').DataTable();
alert(table);
// Apply the search
table.columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change', function () {
that
.search(this.value)
.draw();
});
});
});
</script>
<table class="display" id="example" cellspacing="0">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Employee Id</th>
<th>Active</th>
<th>SFDC</th>
<th>System User</th>
</tr>
</thead>
<tfoot>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Employee Id</th>
<th>Active</th>
<th>SFDC</th>
<th>System User</th>
</tr>
</tfoot>
<tbody>
@foreach (var item in Model)
{
<tr>
<td valign="middle" align="center">
@Html.DisplayFor(modelitem => item.FirstName)
</td>
<td valign="middle" align="center">
@Html.DisplayFor(modelitem => item.LastName)
</td>
<td valign="middle" align="center">
@Html.DisplayFor(modelitem => item.EmailAddress)
</td>
<td valign="middle" align="center">
@Html.DisplayFor(modelitem => item.EmployeeId)
</td>
<td valign="middle" align="center">
@Html.DisplayFor(modelitem => item.IsActive, true)
</td>
<td valign="middle" align="center">
@Html.DisplayFor(modelitem => item.IsSFDC, true)
</td>
<td valign="middle" align="center">
@Html.DisplayFor(modelitem => item.IsSystemUser, true)
</td>
<td valign="middle" align="center">
@Html.ActionLink(" ", "Edit", new { id = item.UserId }, new { @class = "edit_btn", title = "Edit" })
@Html.ActionLink(" ", "Details", new { id = item.UserId }, new { @class = "details", title = "Details" })
@Html.ActionLink(" ", "Delete", new { id = item.UserId }, new { @class = "delete", title = "Delete" })
</td>
</tr>
}
</tbody>
</table>
user6622855 Answers
The mismatch in the number of header columns cause this issue, there should be equal number of header columns and the row columns.
RajI have added an extra <th></th> eight column was missing
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Employee Id</th>
<th>Active</th>
<th>SFDC</th>
<th>System User</th>
<th></th>
Gyrocode.comWhen I got this error I tried the above solutions and after looking at the source code on the webpage, I saw that the entire inner contents of the table was in a <tbody> instead of separated into <thead> and <tbody>. So, make sure you have the following with an equal number of header columns as cells in each row like mentioned above:
<table>
<thead>
<tr>
<th></th>
...
<tr>
</thead>
<tbody>
<tr>
<td></td>
...
</tr>
</tbody>
</table>
After I did this, it worked!
jade290
Mr ListerI faced same situation. For my case, due to runat="server" attribute in table tag.
Once removed runat="server" from table declaration, it worked well.
Htet ThuzarThis could also happen when an action attached to a JQuery selector cannot execute successfully for a particular document's element. Therefore, you either change the element's id or fix the action's JavaScript code.
antoinesUser contributions licensed under CC BY-SA 3.0