CODEWITHSUNDEEP
c#asp.net-mvcjquery-uidatatables
Bokambo
Bokambo

Reputation: 4480

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>

Upvotes: 3

Views: 10505

Answers (5)

antoines
antoines

Reputation: 86

This 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.

Upvotes: 0

jade290
jade290

Reputation: 433

When 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!

Upvotes: 1

Bokambo
Bokambo

Reputation: 4480

I 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>

Upvotes: 2

Htet Thuzar
Htet Thuzar

Reputation: 81

I faced same situation. For my case, due to runat="server" attribute in table tag.

Once removed runat="server" from table declaration, it worked well.

Upvotes: 0

Raj
Raj

Reputation: 71

The mismatch in the number of header columns cause this issue, there should be equal number of header columns and the row columns.

Upvotes: 6

Related Questions