数据表：不能读取未定义的属性“mData”

我有一个Datatables的问题。 我也通过这个链接 ，没有得到任何结果。我已经包括所有的先决条件，直接parsing数据到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] }], }); });

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>

欲了解更多信息，请阅读更多

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

这个错误也会在使用一个格式良好但是没有第二行的情况下出现。

对于一个有7个colums的表，以下不起作用，我们在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>

我在使用脚手架生成器创build的Rails视图中使用DOM数据时遇到了同样的问题。 默认情况下，视图省略最后三列的元素（包含显示，隐藏和销毁logging的链接）。 我发现，如果我在这个问题的解决方法中join了标题中那些列的元素，

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

调试mData错误

如果您有像'aoColumns':[..]这样'aoColumns':[..]表参数'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> <tr> <th>example</th> </tr> </thead>

在我的情况，并使用ASP.NET GridView，UpdatePanel和DropDownList（与select插件，我重置值为零使用一个Javascript行），我得到这个错误，并尝试一切，没有希望天。 问题是，我的下拉代码后面的代码如下，当我select一个值两次应用其行动选定的网格行时，我得到的错误。 我想了好几天，这是一个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();

我遇到了同样的问题，但我是dynamic生成表。 在我的情况下，我的表中缺less<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' ] });

除了不一致和数字之外，数据表脚本列部分中的缺失项也可能导致这一点。 纠正我的数据表search栏。

我正在谈论这个部分; 

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

我挣扎着这个错误，直到我指出这个部分比我的总数less一个“零”。

我find了一些“解决scheme”。

此代码不起作用： 

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

Interesting Posts