0x800a138f - JavaScript runtime error: Unable to get property 'mData' of undefined or null reference

3

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>
c#
asp.net-mvc
jquery-ui
jquery-datatables
asked on Stack Overflow Apr 28, 2015 by user662285 • edited Apr 28, 2015 by user662285

5 Answers

6

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

answered on Stack Overflow Jun 9, 2015 by Raj
2

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>
answered on Stack Overflow Apr 28, 2015 by user662285 • edited Jun 25, 2015 by Gyrocode.com
1

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!

answered on Stack Overflow Nov 30, 2015 by jade290 • edited Dec 6, 2015 by Mr Lister
0

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.

answered on Stack Overflow Jun 25, 2015 by Htet Thuzar
0

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.

answered on Stack Overflow Mar 13, 2017 by antoines

User contributions licensed under CC BY-SA 3.0