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>
2
  • At which line are you getting this error ?
    – Dhrumil
    Apr 28, 2015 at 11:27
  • var table = $('#example').DataTable();
    – Bokambo
    Apr 28, 2015 at 11:29

5 Answers 5

6

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

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

2
  • This actually got me twice. It seems like in some cases the views that are automatically created during the creation of a controller do not add the appropriate tbody and thead statements in Visual Studio 2015. I really appreciate the additional answer, so thank you very much :)
    – Joshua K
    Dec 21, 2018 at 21:25
  • Anytime! I didn't explain clearly that there needs to be an equal number of <td> in the <thead> as there are in the <tbody>. Thanks for replying. Now I got the opportunity.
    – jade290
    Dec 26, 2018 at 20:40
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.

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.