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

Posted 2023-05-07

【中文标题】0x800a138f - JavaScript 运行时错误：无法获取未定义或空引用的属性“mData”

【英文标题】：0x800a138f - JavaScript runtime error: Unable to get property 'mData' of undefined or null reference

【发布时间】：2015-07-07 05:28:27

【问题描述】：

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

。

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

【问题讨论】：

您在哪一行收到此错误？

var table = $('#example').DataTable();

【参考方案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>

【参考方案3】：

当我得到这个错误时，我尝试了上述解决方案，在查看网页上的源代码后，我看到表格的整个内部内容都在<tbody>中，而不是分成<thead>和@987654323 @。因此，请确保您的标题列数与上述每行中的单元格相同：

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

在我这样做之后，它起作用了！

【讨论】：

这实际上得到了我两次。在某些情况下，在创建控制器期间自动创建的视图似乎没有在 Visual Studio 2015 中添加适当的 tbody 和 thead 语句。我真的很感激额外的答案，非常感谢你:)

随时！我没有清楚地解释 中的 的数量必须与 中的数量相同。感谢回复。现在我得到了机会。

【参考方案4】：

我遇到了同样的情况。就我而言，由于 table 标记中的 runat="server" 属性。

从表声明中删除 runat="server" 后，它运行良好。

【参考方案5】：

当附加到 JQuery 选择器的操作无法针对特定文档的元素成功执行时，也会发生这种情况。因此，您要么更改元素的 id，要么修复操作的 JavaScript 代码。