无法读取属性'mData'未定义的

我有一个问题与Datatables。我还通过这个链接没有产生任何结果。我已经包括了将数据直接解析到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]
}],
});
});
452510 次浏览
小开

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

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

debugging mData error

小开

供你参考datatable需要一个格式良好的表。它必须包含<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>

有关更多信息点击这里阅读更多

小开

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>

下面的代码与一个__ABC0对应一个<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列的表，下面的不工作，我们看到“不能读取属性'mData' of undefined”在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>
小开

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

这段代码不起作用:

<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行将值重置为零)，我得到了这个错误，尝试了所有的东西，几天没有希望。问题是，我的下拉代码后面的代码如下所示，当我选择一个值两次将其操作应用到选定的网格行时，我得到了这个错误。我想了几天，这是一个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();
小开

如果你有像'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>
小开

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

小开

我遇到了同样的问题，但我正在生成表动态。在我的例子中，我的表缺少<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'
]
});
小开

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

我说的是这部分;

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

我在这个错误中苦苦挣扎，直到有人指出，这个部分的“null”比我的总人头数少一个。

小开

在我的情况下，这个错误发生，如果我使用表没有标题

              <thead>
<tr>
<th>example</th>
</tr>
</thead>
小开

你需要用<thead>来包装列标题，用<tbody>来包装行。还要确保您有匹配的编号。列标题<th>的td

小开

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

对我来说，这个问题与上面给出的答案略有不同。对我来说，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>
小开

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

小开

我可能是由acolumns字段产生的。如上所述

aoColumns:如果指定，则该数组的长度必须相等 到原始HTML表中的列数。在此处使用“null” 您希望只使用默认值并自动检测 选项。< / p >

然后必须像在Columns表中一样添加字段

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

技巧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'中使用一些相同的属性适用于你的Header &的身体。
  • 如果你的表列不为空，使用类似[Null，——，NA, Nil]的东西
  • 你的表是一个良好的与<td>, <tr>问题
小开

如何在。net MVC视图中成功地渲染一个数据表，这个问题让我抓狂。这工作:

 **@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>和<tbody>与相同的数字<th>和<td>解决了我的问题。

小开

我遇到了同样的错误，当试图添加colspan最后th

<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位于最后th的表，但可以应用于colspan位于任何中间th的表。

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

我希望这能帮助到一些人。

小开

在我的例子中，这个错误的原因是我有两个具有相同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>

小开

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

<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在webform中工作的人:

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


提交答案