数据表：无法读取未定义的属性“mData”答案

【解决方案2】：

Cannot read property 'fnSetData' of undefined 的一个常见原因是列数不匹配，就像在这个错误代码中一样：

<thead>                 <!-- thead required -->
    <tr>                <!-- tr required -->
        <th>Rep</th>    <!-- td instead of th will also work -->
        <th>Titel</th>
                        <!-- th missing here -->
    </tr>
</thead>
<tbody>
    <tr>
        <td>Rep</td>
        <td>Titel</td>
        <td>Missing corresponding th</td>
    </tr>
</tbody>

虽然以下代码与 一个 <th> 每个 <td>（列数必须匹配）有效：

<thead>
    <tr>
        <th>Rep</th>       <!-- 1st column -->
        <th>Titel</th>     <!-- 2nd column -->
        <th>Added th</th>  <!-- 3rd column; th added here -->
    </tr>
</thead>
<tbody>
    <tr>
        <td>Rep</td>             <!-- 1st column -->
        <td>Titel</td>           <!-- 2nd column -->
        <td>th now present</td>  <!-- 3rd column -->
    </tr>
</tbody>

当使用带有 colspan 但没有第二行的格式良好的头时也会出现该错误。

对于具有 7 列的表，以下内容不起作用，我们在 javascript 控制台中看到“无法读取未定义的属性 'mData'”：

<thead>
    <tr>
        <th>Rep</th>
        <th>Titel</th>
        <th colspan="5">Download</th>
    </tr>
</thead>

虽然这有效：

<thead>
    <tr>
        <th rowspan="2">Rep</th>
        <th rowspan="2">Titel</th>
        <th colspan="5">Download</th>
    </tr>
    <tr>
        <th>pdf</th>
        <th>nwc</th>
        <th>nwctxt</th>
        <th>mid</th>
        <th>xml</th>
    </tr>
</thead>

【讨论】：

发现您的回答很有用。我的标记缺少用于包含所有 th 元素的 tr。把它留在这里，以防有人觉得这很有用！
这个答案也让我找到了我的解决方案。我的thead 中缺少th 列，这是导致错误的原因。 Nathan Hanna 的回答似乎也表明了这个问题。
这可以帮助我看到我的theadtoo 中缺少th！
即使在colspan 上解释了四年仍然是个问题。我不得不输入一些空白的th 而没有colspan 来消除错误。但是获得此功能的简单附加功能。顺便说一句：Rails 5.1.5，引导程序 4.0.0。我刚刚在页面中添加了样式表和脚本 CDN，以及 $(document).ready…。
@Greg 抱歉，我不明白。

【解决方案3】：

让<thead> 和<tbody> 具有相同数量的<th> 和<td> 解决了我的问题。

【讨论】：

谢谢，这也是我的问题。先生，您的回答很有帮助。
这也为我解决了。

【解决方案4】：

我在通过脚手架生成器创建的 Rails 视图中使用 DOM 数据时遇到了同样的问题。默认情况下，视图省略最后三列的<th> 元素（其中包含显示、隐藏和销毁记录的链接）。我发现如果我在<thead> 内的<th> 元素中为这些列添加标题，它可以解决问题。

我不能说这是否与您遇到的问题相同，因为我看不到您的 html。如果不是同一个问题，您可以使用 chrome 调试器通过单击控制台中的错误（这将带您到它失败的代码）来找出出错的列，然后添加一个条件断点（col==undefined）。当它停止时，您可以检查变量 i 以查看它当前位于哪一列，这可以帮助您找出该列与其他列的不同之处。希望对您有所帮助！

【讨论】：

这是帮助我解决问题的唯一方法。谢谢！
不确定您是否已经提到过这一点，但我们可以“观察”右列中的变量并找出相关的表。对于我的情况，它是 Asp.Net 表的默认呈现，当表为空时，它是不标准化的。感谢您的提示！
谢谢... Nathan 的调试步骤。它帮助了我。
对我来说，通过添加 thead 和 tbody 元素解决了这个问题。
我有相同的 Rails 设置，但我用colspan="3" 将最后三列命名为“详细信息”，但我遇到了错误（这就是我在这个页面上的结束方式）。我摆弄了一下，但最终放弃并创建了三个 th 元素，第一个元素是“详细信息”，最后两个是空白的。摆弄表明 dataTables 在 colspan 作为系列中的最后一个存在问题。 OP 修复很奇怪，因为列数没有加起来。我桌上没有任何条件，比如order或sortable。我确实在它工作后添加了这些。

【解决方案5】：

如果您的 'aoColumns':[..] 之类的表参数与正确的列数不匹配，也会发生这种情况。从其他页面复制粘贴代码以快速启动数据表集成时，通常会出现此类问题。

例子：

这行不通：

<table id="dtable">
    <thead>
        <tr>
            <th>col 1</th>
            <th>col 2</th>
        </tr>
    </thead>
    <tbody>
        <td>data 1</td>
        <td>data 2</td>
    </tbody>
</table>
<script>
        var dTable = $('#dtable');
        dTable.DataTable({
            'order': [[ 1, 'desc' ]],
            'aoColumns': [
                null,
                null,
                null,
                null,
                null,
                null,
                {
                    'bSortable': false
                }
            ]
        });
</script>

但这会起作用：

<table id="dtable">
    <thead>
        <tr>
            <th>col 1</th>
            <th>col 2</th>
        </tr>
    </thead>
    <tbody>
        <td>data 1</td>
        <td>data 2</td>
    </tbody>
</table>
<script>
        var dTable = $('#dtable');
        dTable.DataTable({
            'order': [[ 0, 'desc' ]],
            'aoColumns': [
                null,
                {
                    'bSortable': false
                }
            ]
        });
</script>

【讨论】：

正是我的问题，只有 'columns' 属性。
@NickPoulos 是的，如果它引用表中不存在的索引，它可能发生在任何配置参数中。

【解决方案6】：

发生这种情况的另一个原因是 DataTable 初始化中的 columns 参数。

列数必须与标题匹配

"columns" : [ {
                "width" : "30%"
            }, {
                "width" : "15%"
            }, {
                "width" : "15%"
            }, {
                "width" : "30%"
            } ]

我有 7 列

<th>Full Name</th>
<th>Phone Number</th>
<th>Vehicle</th>
<th>Home Location</th>
<th>Tags</th>
<th>Current Location</th>
<th>Serving Route</th>

【讨论】：

【解决方案7】：

提示 1：

参考这个链接你会得到一些想法：

https://datatables.net/forums/discussion/20273/uncaught-typeerror-cannot-read-property-mdata-of-undefined

提示 2：

检查以下是否正确：

请检查 Jquery 版本
请检查您的 CDN 或本地数据表相关 .min & css 文件的版本
你的桌子有<thead></thead> & <tbody></tbody> 标签
您的表格标题列长度与正文列长度相同
您在 style='display:none' 中使用一些 cloumns 作为相同的属性适用于您的页眉和正文。
您的表格列不能为空，请使用 [ Null, --, NA, Nil ]
您的桌子很好，没有<td>, <tr> 问题

【讨论】：

和解决了我的问题。谢谢。
我在其中一列中没有文字，只有一个很棒的按钮添加一个这是诀窍。

【解决方案8】：

您必须删除您的colspan，并且th 和td 的数量需要匹配。

【讨论】：

【解决方案9】：

当我尝试将 colspan 添加到最后一个时，我遇到了同样的错误

<table>
  <thead>
    <tr>    
      <th>&nbsp;</th> <!-- column 1 -->
      <th colspan="2">&nbsp;</th> <!-- column 2&3 -->
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

并通过在 tr 的末尾添加隐藏列来解决它

<thead>
  <tr>    
    <th>&nbsp;</th> <!-- column 1 -->
    <th colspan="2">&nbsp;</th> <!-- column 2&3 -->

    <!-- hidden column 4 for proper DataTable applying -->
    <th style="display: none"></th> 
  </tr>
</thead>

<tbody>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>

    <!-- hidden column 4 for proper DataTable applying -->
    <td style="display: none"></td>
  </tr>
</tbody>

对此的解释是，由于某种原因，DataTable 不能应用于最后一个带有 colspan 的表，但可以应用，如果 colspan 用于任何中间 th。

这个解决方案有点老套，但比我找到的任何其他解决方案都更简单、更短。

我希望这会对某人有所帮助。

【讨论】：

【解决方案10】：

在我的情况下，如果我使用没有标题的表格，则会发生此错误

              <thead>
                   <tr>
                       <th>example</th>
                  </tr>
              </thead>

【讨论】：

谢谢 - 我可以确认这也解决了我的此类错误。

【解决方案11】：

我遇到了类似的错误。问题是标题行不正确。当我执行以下标题行时，我遇到的问题得到了解决。

<table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
    <tr>
                <th colspan="6">Common Title</th>
            </tr>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
</tbody>
</table>

【讨论】：

【解决方案12】：

对我来说与上面给出的答案略有不同。对我来说，HTML 标记很好，但是我在 javascript 中的一列丢失并且与 html 不匹配。

即

<table id="companies-index-table" class="table table-responsive-sm table-striped">

                            <thead>
                            <tr>
                                <th>Id</th>
                                <th>Name</th>
                                <th>Created at</th>
                                <th>Updated at</th>
                                <th>Count</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($companies as $company)
                                <tr>
                                    <td>{{ $company->id }}</td>
                                    <td>{{ $company->name }}</td>
                                    <td>{{ $company->created_at }}</td>
                                    <td>{{ $company->updated_at }}</td>
                                    <td>{{ $company->count }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>

我的脚本：-

<script>
        $(document).ready(function() {
            $('#companies-index-table').DataTable({
                serverSide: true,
                processing: true,
                responsive: true,
                    ajax: "{{ route('admincompanies.datatables') }}",
                columns: [
                    { name: 'id' },
                    { name: 'name' },
                    { name: 'created_at' },
                    { name: 'updated_at' },     <-- I was missing this line so my columns didn't match the thead section.
                    { name: 'count', orderable: false },
                ],
            });
        });
    </script>

【讨论】：

【解决方案13】：

我有一个动态生成但格式错误的表格，其中有一个错字。我错误地将<td> 标签复制到另一个<td> 中。我的列数匹配。我有<thead> 和<tbody> 标签。一切都匹配，除了这个我有一阵子没有注意到的小错误，因为我的专栏中有很多链接和图像标签。

【讨论】：

【解决方案14】：

这个让我发疯——如何在 .NET MVC 视图中成功呈现 DataTable。这有效：

 **@model List<Student>
 @{
    ViewData["Title"] = "Index";
}
 <h2>NEW VIEW Index</h2>
 <table id="example" class="display" style="width:100%">
   <thead>
   <tr>
   <th>ID</th>
    <th>Firstname</th>
    <th>Lastname</th> 
  </tr>
  </thead>
  <tbody>
@foreach (var element in Model)
{
    <tr>
    <td>@Html.DisplayFor(m => element.ID)</td>
    <td>@Html.DisplayFor(m => element.FirstName)</td>
    <td>@Html.DisplayFor(m => element.LastName)</td>
    </tr>

}
</tbody>
</table>**

JS 文件中的脚本：

**$(document).ready(function () {
    $('#example').DataTable();
});**

【讨论】：

我缺少的是<thead> 标签。

【解决方案15】：

在我的情况下，使用 ASP.NET GridView、UpdatePanel 和 DropDownList（使用选择的插件，我使用 Javascript 行将值重置为零），我遇到了这个错误并尝试了所有没有希望几天。问题是我在后面的代码中的下拉代码如下，当我两次选择一个值以将其操作应用于选定的网格行时，我得到了那个错误。几天来我一直认为这是一个 Javascript 问题（在我的情况下也是如此），最后修复是在更新过程中将下拉值设为零：

  private void ddlTasks_SelectedIndexChanged(object sender, System.EventArgs e)
  {
     if (ddlTasks.SelectedValue != 0) {
        ChangeStatus(ddlTasks.SelectedValue);
        ddlTasks.SelectedValue = "0"; //// **This fixed my issue**
     }

     dvItemsGrid.DataSource = CreateDatasource();
     dvItemsGrid.DataBind();
     dvItemsGrid.UseAccessibleHeader = true;
     dvItemsGrid.HeaderRow.TableSection = TableRowSection.TableHeader;

  }

这是我的错：

     $('#<%= DropDownList.ClientID%>').val('0').trigger("chosen:updated").chosen();

【讨论】：

这里对我有用的部分是dvItemsGrid.HeaderRow.TableSection = TableRowSection.TableHeader;。否则，gridview 不会呈现 <thead>。

【解决方案16】：

我遇到了同样的问题，但我动态地生成表格。就我而言，我的表缺少<thead> 和<tbody> 标签。

这是我的代码 sn-p，如果它对某人有帮助的话

   //table string
   var strDiv = '<table id="tbl" class="striped center responsive-table">';

   //add headers
   var strTable = ' <thead><tr id="tableHeader"><th>Customer Name</th><th>Customer Designation</th><th>Customer Email</th><th>Customer Organization</th><th>Customer Department</th><th>Customer ContactNo</th><th>Customer Mobile</th><th>Cluster Name</th><th>Product Name</th><th> Installed Version</th><th>Requirements</th><th>Challenges</th><th>Future Expansion</th><th>Comments</th></tr> </thead> <tbody>';


  //add data
  $.each(data, function (key, GetCustomerFeedbackBE) {
                            strTable = strTable + '<tr><td>' + GetCustomerFeedbackBE.StrCustName + '</td><td>' + GetCustomerFeedbackBE.StrCustDesignation + '</td><td>' + GetCustomerFeedbackBE.StrCustEmail + '</td><td>' + GetCustomerFeedbackBE.StrCustOrganization + '</td><td>' + GetCustomerFeedbackBE.StrCustDepartment + '</td><td>' + GetCustomerFeedbackBE.StrCustContactNo + '</td><td>' + GetCustomerFeedbackBE.StrCustMobile + '</td><td>' + GetCustomerFeedbackBE.StrClusterName + '</td><td>' + GetCustomerFeedbackBE.StrProductName + '</td><td>' + GetCustomerFeedbackBE.StrInstalledVersion + '</td><td>' + GetCustomerFeedbackBE.StrRequirements + '</td><td>' + GetCustomerFeedbackBE.StrChallenges + '</td><td>' + GetCustomerFeedbackBE.StrFutureExpansion + '</td><td>' + GetCustomerFeedbackBE.StrComments + '</td></tr>';
                        });

//add end of tbody
 strTable = strTable + '</tbody></table>';

//insert table into a div                 
   $('#divCFB_D').html(strDiv);
   $('#tbl').html(strTable);


    //finally add export buttons 
   $('#tbl').DataTable({
                            dom: 'Bfrtip',
                            buttons: [
                                'copy', 'csv', 'excel', 'pdf', 'print'
                            ]
                        });

【讨论】：

【解决方案17】：

除了不一致和数字之外，数据表脚本列部分中缺少的项目也可能导致这种情况。更正修复了我的数据表搜索栏的问题。

我说的是这部分；

"columns": [
  null,
  .
  .
  .
  null
           ],

我一直在努力解决这个错误，直到有人指出这部分的“null”比我的总数量少一个。

【讨论】：

【解决方案18】：

对于那些使用 GridView 在 Web 窗体中工作的人：

摩西的回答是完全正确的。但由于我们正在生成表格，默认情况下不会生成thead 标签。因此，要解决问题，请将[YourGridViewID].HeaderRow.TableSection = TableRowSection.TableHeader 添加到您的后端，在DataBind() 方法调用下方（如果您正在使用它）。此配置将 GridView 中字段的HeaderText 值作为它在thead 内生成的th 标记的值。

【讨论】：

【解决方案19】：

在我的情况下，这个错误的原因是我有 2 个表具有相同的 id 名称和不同的表结构，因为我习惯于复制粘贴表代码。请确保每个表都有不同的 id。

<table id="tabel_data">
    <thead>
        <tr>
            <th>heading 1</th>
            <th>heading 2</th>
            <th>heading 3</th>
            <th>heading 4</th>
            <th>heading 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data-1</td>
            <td>data-2</td>
            <td>data-3</td>
            <td>data-4</td>
            <td>data-5</td>
        </tr>
    </tbody>
</table>

<table id="tabel_data">
    <thead>
        <tr>
            <th>heading 1</th>
            <th>heading 2</th>
            <th>heading 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data-1</td>
            <td>data-2</td>
            <td>data-3</td>
        </tr>
    </tbody>
</table>

【讨论】：

【解决方案20】：

您需要将行包装在 <thead> 中作为列标题，<tbody> 作为行。还要确保您有匹配的号码。列标题 <th> 就像您为 td 所做的那样

【讨论】：

【解决方案21】：

我可能是由aoColumns 字段引起的。如此处所述

aoColumns：如果指定，那么这个数组的长度必须相等到原始 HTML 表中的列数。在哪里使用'null' 您希望仅使用默认值并自动检测到选项。

然后你必须在表格列中添加字段

...
aoColumnDefs: [
    null,
    null,
    null,
    { "bSortable": false },
    null,
],
...

【讨论】：

【解决方案22】：

我找到了一些“解决方案”。

此代码不起作用：

<table>
<thead>
    <tr>
        <th colspan="3">Test</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</tbody>

但这没关系：

<table>
<thead>
    <tr>
        <th colspan="2">Test</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</tbody>

我认为，问题在于，最后一个 TH 不能有属性 colspan。

【讨论】：