I have following dataTable which has 6 columns.
After rendering the table I am initializing .DataTable(). But getting the error:
'mData' of undefined TypeError: Cannot read property 'mData' of undefined
As mentioned in few of the posts , I have added tfoot but still have the error.
$(document).ready(function() {
$('#pTable').DataTable();
});<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="pTable" class="display" style="width:100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th>NOK</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">288f60e3-0d8f-4a4a-92f9-4f4eeb737909</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy1</td>
<td class="text-muted" data-bind="text: NOK">SomeOne</td>
<td class="text-muted" data-bind="text: SYMPTOMS">12354475541</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="true">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">true</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">ae2dc252-4940-455e-a528-766f3d7d8fe9</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy2</td>
<td class="text-muted" data-bind="text: NOK">SomeOne Else</td>
<td class="text-muted" data-bind="text: SYMPTOMS">0564654654734</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="false">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">false</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Status</th>
<th>Name</th>
<th>Patients</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
</tr>
</tfoot>
</table>You had 6 ths but had 7 tds in both of the rows. The number of th must match with the number of td. Adding a hidden th fixed it
$(document).ready(function() {
$('#pTable').DataTable();
});<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="pTable" class="display" style="width:100%">
<thead>
<tr>
<th style="display:none"></th>
<th>Status</th>
<th>Name</th>
<th>NOK</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">288f60e3-0d8f-4a4a-92f9-4f4eeb737909</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy1</td>
<td class="text-muted" data-bind="text: NOK">SomeOne</td>
<td class="text-muted" data-bind="text: SYMPTOMS">12354475541</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="true">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">true</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">ae2dc252-4940-455e-a528-766f3d7d8fe9</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy2</td>
<td class="text-muted" data-bind="text: NOK">SomeOne Else</td>
<td class="text-muted" data-bind="text: SYMPTOMS">0564654654734</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="false">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">false</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Status</th>
<th>Name</th>
<th>Patients</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
</tr>
</tfoot>
</table>