Jquery Datatables:无法读取未定义的属性“mData”_Jquery_Console_Datatables

Jquery Datatables:无法读取未定义的属性“mData”

jquery datatables

Jquery Datatables:无法读取未定义的属性“mData”,jquery,console,datatables,Jquery,Console,Datatables,我对数据表有问题。我也经历过，但没有任何结果。我已经包括了将数据直接解析到DOM中的所有先决条件。请帮我解决这个问题剧本我在通过scaffold生成器创建的Rails视图中使用DOM数据时遇到了同样的问题。默认情况下，视图会忽略最后三列的元素，其中包含显示、隐藏和销毁记录的链接。我发现，如果我在中的元素中添加了这些列的标题，它就解决了这个问题我不能说这是否与您遇到的问题相同，因为我看不到您的html。如果不是同一个问题，您可以使用chrome调试器，通过单击控制台中的错误来确定它在哪个列上

我对数据表有问题。我也经历过，但没有任何结果。我已经包括了将数据直接解析到DOM中的所有先决条件。请帮我解决这个问题

剧本

我在通过scaffold生成器创建的Rails视图中使用DOM数据时遇到了同样的问题。默认情况下，视图会忽略最后三列的元素，其中包含显示、隐藏和销毁记录的链接。我发现，如果我在中的元素中添加了这些列的标题，它就解决了这个问题

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

FYI数据表需要格式良好的表。它必须包含和标记，否则将抛出此错误。还要检查以确保所有行（包括标题行）的列数相同

下面将抛出错误no和标记

下面的代码还将抛出一个列数不等的错误

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

有关详细信息，无法读取未定义属性“fnSetData”的常见原因是列数不匹配，如以下错误代码：

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

而以下每列一个的代码必须与works匹配：

<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但没有第二行的格式良好的THAD时，也会出现此错误

对于具有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>

我找到了一些解决办法

此代码不起作用：

<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属性。

在我的例子中，使用ASP.NET GridView、UpdatePanel和DropDownList以及我选择的插件，其中我使用Javascript行将值重置为零，我得到了这个错误，并尝试了几天没有希望的一切。问题是，我在code behind下拉列表中的代码如下所示，当我两次选择一个值以将其操作应用于选定的网格行时，我得到了该错误。几天来，我一直认为这又是一个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;

  }

这是我的错：

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

例如：

这行不通：

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

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

我遇到了同样的问题，但我正在动态生成表。在我的情况下，我的桌子上缺少和标签

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

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

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

我说的是这部分,

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

我一直在努力解决这个错误，直到有人指出这个部分的空值比我的总THAD计数少一个。

在我的例子中，如果我使用不带表头的表，就会出现这个错误

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

您需要为列标题和行包装行。此外，还应确保具有与td相同的列标题编号。发生这种情况的另一个原因是DataTable初始化中的columns参数

列数必须与标题匹配

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

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

i、 e

我的剧本：-

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

我有一个动态生成的表，但格式不正确，有一个输入错误。我错把一个标签复制到另一个里面了。我的列数匹配。我有两个标签。所有内容都匹配，除了这个小错误，我有一段时间没有注意到，因为我的专栏中有很多链接和图像标签。

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

aoColumns：如果指定，则此数组的长度必须相等添加到原始HTML表中的列数。在以下位置使用“null” 您希望仅使用默认值并自动检测到选项

然后，您必须在表列中添加字段

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

提示1：

参考此链接，您将获得一些想法：

提示2：

检查以下各项是否正确：

P 请检查Jquery版本请检查您的CDN或与本地datatable相关的.min和css文件的版本您的桌子上有&个标签表标题列的长度与正文列的长度相同您在style='display:none'中使用的一些cloumn作为相同的属性应用于标题和正文。您的表列不为空，请使用[Null，-，NA，Nil] 你的桌子很好，没有问题

这让我抓狂——如何在.NETMVC视图中成功呈现数据表。这起到了作用：

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

拥有和拥有相同数量的和解决了我的问题。

当我尝试将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不能应用于最后一个th中带有colspan的表，但如果colspan在任何中间th中使用，则可以应用DataTable

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

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

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

标题1 标题2 标题3 标题4 标题5 数据-1 数据-2 数据-3 数据-4 数据-5 标题1 标题2 标题3 数据-1 数据-2 数据-3

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

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

对于使用GridView在Webforms中工作的用户：

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

您能显示表的html吗？很抱歉没有发布html。感谢您的关注。我修复了我的问题：。当使用格式良好的thead和colspan，但没有第二行通过先注释.dataTable函数来获得每tdrun的第1行，然后查看该表，您将在更多情况下发现问题表中必须缺少AD或table heading列，因此脚本无法找到该列，请检查AD下的标题或任何列名称，发现您的答案有用。我的标记缺少用于封装所有th元素的tr。把它留在这里，以防有人发现它有用！这个答案也引导我找到了我的解决方案。我的thead中缺少第th列，这是导致错误的原因。Nathan Hanna的回答似乎也表明了这一问题。这有助于我发现我的Theadatoo中缺少了一个瘦子！即使是四年的科尔斯潘口译仍然是一个问题。我必须输入一些空白的th和no colspan来消除错误。但要获得此功能，这是一个多么简单的附加组件啊。顺便说一句：Rails 5.1.5，Bootstrap 4.0.0。我刚刚在页面中添加了样式表、脚本CDN和$document.ready…。@Greg抱歉，我不明白。这是唯一帮助我解决问题的方法。非常感谢。不确定您是否已经提到了这一点，但我们可以观察右列上的变量，并找出哪个表是相关的。在我的例子中，它是Asp.Net表的默认呈现，当表为空时，它不是标准化的。谢谢你的提示！非常感谢。Nathan负责调试步骤。这对我很有帮助。对我来说，问题是通过添加thead和tbody元素来解决的。我有相同的Rails设置，但我用colspan=3命名了最后三列的详细信息，但我出现了错误，这就是我在这个页面的结局。我做了一些修改，但最终放弃了，创建了第三个元素，第一个元素是细节，最后两个元素是空白。摆弄表明dataTables与colspan之间存在问题，colspan是本系列的最后一个。OP修复是奇数的，因为列的数量不相加。我没有任何条件，比如订单或可排序。我确实是在我让它工作后添加的。当我把它拆下来的时候，我的电脑上有额外的功能！！谢谢lot@SarowerJahan很高兴我能帮上忙。我在这个问题上花了整整一天的时间。问题出在哪里？我有2次但是3次td。在这样一个愚蠢的问题上自责！“太感谢了！”福克斯赛洛克，按惯例是这样的。您所描述的是我知道的自定义配置，但是如果您不提供自定义配置，那么它默认为我的答案地址的约定，它可以正常工作

添加tbody和thead标记后，谢谢，这正是我的问题，只有'columns'属性。@NickPoulos是的，如果它引用了表中不存在的索引，则在任何配置参数中都可能发生这种情况。谢谢-我可以确认这也修复了我的此类错误。谢谢，这也是我的问题。你的回答很有帮助，先生。这对我来说也是固定的。对我来说也是固定的，谢谢你的帖子。解决我的问题。谢谢。其中一列中没有文本，只有一个按钮添加了一个dis-the技巧。这里对我有用的部分是dvItemsGrid.HeaderRow.TableSection=TableRowSection.TableHeader；。否则，gridview不会渲染一个网格。

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

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

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

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

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

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