jQuery dataTable error Cannot read property 'mData' of undefined

Question

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>

where is mData defined? I cannot see it in your post. The likely cause is that one of the properties is empty or NaN or something like that and you are not handling it. — bilpor
– bilpor, Commented Sep 12, 2018 at 6:49
@bilpor, appreciate for attempting to answer or help , but I think we need to have some context and idea about the framework in question. Do you know how data tables used? — Simsons
– Simsons, Commented Sep 12, 2018 at 6:59

Thum Choon Tat · Accepted Answer · 2018-09-12 06:50:46Z

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>

Prashant Kushwaha · Accepted Answer · 2018-09-13 05:44:33Z

Number of headers thead tr th and number of cells in the tbody tr td should be same in each row(Same with the footer too). Once you do this this error will be removed.

'<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>
        <th>Some Heading</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>
        <th>Some Heading</th>
    </tr>
</tfoot>

'

Skeeve · Accepted Answer · 2023-06-01 05:54:01Z

-1

A few years later…

I came here because I faced the same issue and my <th> and <td> count matched. The issue was: I didn't use <thead> and <tbody>

answered Jun 1, 2023 at 5:54

Skeeve

8,6422 gold badges21 silver badges31 bronze badges

1 Comment

Skeeve Over a year ago

Okay… Downvoted for whatever reason.

Collectives™ on Stack Overflow

jQuery dataTable error Cannot read property 'mData' of undefined

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related