0x800a138f - JavaScript运行时错误:无法获取未定义或空引用的属性“mData”

时间:2015-04-28 11:24:46

标签: c# asp.net-mvc jquery-ui jquery-datatables

我正在使用Datatables版本1.10.6。 在jquery.dataTables.js中,我遇到了错误。

0x800a138f - JavaScript运行时错误:无法获取未定义或空引用的属性“mData”。

$.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 );
                        }
                    }
                } );
            }

在MVC我正在使用:

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

5 个答案:

答案 0 :(得分:6)

标题列数不匹配导致此问题,标题列和行列应该相同。

答案 1 :(得分:2)

我添加了额外的<th></th>八列缺失

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

答案 2 :(得分:1)

当我收到此错误时,我尝试了上述解决方案,在查看网页上的源代码后,我看到表格的整个内部内容都在<tbody>而不是<thead> }和<tbody>。因此,请确保您具有与每行中的单元格相同数量的标题列,如上所述:

<table>
    <thead>
        <tr>
            <th></th>
            ...
        <tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            ...
        </tr>
    </tbody>
</table>

在我这样做之后,它起作用了!

答案 3 :(得分:0)

我遇到了同样的情况。对于我的情况,由于表标记中的runat =“server”属性。

从表声明中删除了runat =“server”后,它运行良好。

答案 4 :(得分:0)

当附加到JQuery选择器的操作无法成功执行特定文档的元素时,也会发生这种情况。因此,您可以更改元素的ID或修复操作的JavaScript代码。