Question

我遇到Datatables的问题。我也经历了this link，它没有给我任何结果。我已经包含了将数据直接解析到DOM中的所有先决条件。请帮我解决这个问题。

脚本

$(document).ready(function() {
  $('.viewCentricPage .teamCentric').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "bPaginate": false,
    "bFilter": true,
    "bSort": true,
    "aaSorting": [
      [1, "asc"]
    ],
    "aoColumnDefs": [{
      "bSortable": false,
      "aTargets": [0]
    }, {
      "bSortable": true,
      "aTargets": [1]
    }, {
      "bSortable": false,
      "aTargets": [2]
    }],
  });
});

Answer 1

FYI dataTables 需要格式正确的表格。它必须包含<thead>和<tbody>标记，否则会引发此错误。还要检查以确保包括标题行在内的所有行都具有相同的列数。

以下内容将抛出错误（无<thead>和<tbody>标记）

<table id="sample-table">
    <tr>
        <th>title-1</th>
        <th>title-2</th>
    </tr>
    <tr>
        <td>data-1</td>
        <td>data-2</td>
    </tr>
</table>

以下内容也会引发错误（列数不等）

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

了解更多信息read more here

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

当使用结构良好的thead和colspan但没有第二行时，也会出现错误。

对于包含7个列的表，以下内容不起作用，我们看到＆＃34;无法读取属性＆＃39; mData＆＃39;未定义＆＃34;在javascript控制台中：

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

Answer 3

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

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

debugging mData error

Answer 4

如果您有'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>

Answer 5

发生这种情况的另一个原因是因为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>

Answer 6

您必须删除colspan以及th和td需要匹配的数量。

Answer 7

在我的情况下，如果我使用没有标题的表

，则会发生此错误

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

Answer 8

提示1：

参考此链接，您会得到一些想法：

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

提示2：

检查以下内容是否正确：

请检查Jquery Vesion
请检查您的 CDN 版本或与本地数据表相关的 .min＆css文件
您的表中有<thead></thead>和<tbody></tbody>标签
您的表标题列长与 Body 列长相同
您在style='display:none'中使用一些cloumns就像在标题和正文中一样适用。
您的表中的列不为空，请使用 [Null，-，NA，Nil]
您的表很好，没有<td>, <tr>问题

Answer 9

我有一个动态生成的但格式错误的表格，带有错字。我错误地在另一个<td>中复制了一个<td>标记。我的栏数相符。我有<thead>和<tbody>标签。一切都匹配，除了我有一段时间没有注意到的这个小错误之外，因为我的专栏中有很多链接和图像标签。

Answer 10

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

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

  <tbody>
    <tr>
      <tr>&nbsp;</tr>
      <tr>&nbsp;</tr>
      <tr>&nbsp;</tr>
    </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>
    <tr>&nbsp;</tr>
    <tr>&nbsp;</tr>
    <tr>&nbsp;</tr>

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

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

此解决方案有点笨拙，但比我发现的任何其他解决方案都更简单，更短。

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

Answer 11

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

即

NSTimer

我的脚本：-

NSClickGestureRecognizer

Answer 12

我遇到了同样的问题，但我正在生成表动态。在我的情况下，我的表格遗漏了<thead>和<tbody>个标签。

这是我的代码片段，如果它帮助了某人

   //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'
                            ]
                        });

Answer 13

在我的情况下，并使用ASP.NET GridView，UpdatePanel和DropDownList（使用Chosen插件，我使用Javascript行将值重置为零），我收到此错误并尝试了所有内容希望好几天。问题是我的代码背后的代码如下所示，当我选择一个值两次以将其操作应用于选定的网格行时，我得到了该错误。我想好几天这是一个Javascript问题（再次，在我的情况下），最后修复为更新过程的drowpdown值给出零：

  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();

Answer 14

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

我正在谈论这部分;

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

我一直在努力解决这个错误，直到我指出这个部分少了一个＆＃34; null＆＃34;比我的总数还要多。

Answer 15

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

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

Answer 16

对于那些使用 GridView 在 Webforms 中工作的人：

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

Answer 17

您需要在<thead>中为行标题包装您的行，并为行添加<tbody>。还要确保你有匹配的号码。列标题<th>与td

一样

Answer 18

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

aoColumns：如果指定，则此数组的长度必须相等到原始HTML表中的列数。在其中使用“ null” 您只想使用默认值并自动检测选项。

然后，您必须添加表Columns

中的字段

asp:SqlDataSource ID="dsOperator" runat="server" ConnectionString="<%$ ConnectionStrings:DefaultConnection %>"
        SelectCommand=" select '+' id,'+' txt from dual  
                        union all select '-','-' from dual
                         union all select '*','*' from dual
                         union all select '/','/' from dual
                         union all select '&gt;','&gt;' from dual
                         union all select '&lt;','&lt;' from dual
                         union all select '%','%' from dual
                         union all select '||','||' from dual
                         union all select '=','=' from dual
                         union all select '!=','!=' from dual
                         union all select '&gt;=','&gt;=' from dual
                         union all select '&lt;=','&lt;=' from dual
                         union all select 'LIKE','IS NULL' from dual
                         union all select 'BETWEEN','BETWEEN' from dual
                         union all select 'IN','IN' from dual
                         union all select 'NOT','NOT' from dual
                         union all select 'NOT IN','NOT IN' from dual
                         union all select 'AND','AND' from dual
                         union all select 'OR','OR' from dual
                         union all select 'ANY SOME','ANY SOME' from dual
                         union all select 'ALL','ALL' from dual
                        union all select 'EXISTS','EXISTS' from dual
                        union all select 'ESCAPE','ESCAPE' from dual
                        union all select 'UNION','UNION' from dual
                        union all select 'UNION ALL','UNION ALL' from dual
                        union all select 'INTERSECT','INTERSECT' from dual
                        union all select 'MINUS','MINUS' from dual " ProviderName="<%$ ConnectionStrings:DefaultConnection.ProviderName %>"></asp:SqlDataSource>

Answer 19

这使我发疯-如何在.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();
});**

Answer 20

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

Answer 21

在我的情况下，此错误的原因是由于我习惯于复制粘贴表代码，所以我有2个表具有相同的ID名称且表结构不同。请确保每个表都有不同的ID。

MAP_SHARED

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

数据表：无法读取属性＆＃39; mData＆＃39;未定义的

22 个答案: