未捕获的类型错误：无法读取未定义的属性“mData”
Posted
技术标签:
【中文标题】未捕获的类型错误：无法读取未定义的属性“mData”【英文标题】：Uncaught TypeError: Cannot read property 'mData' of undefined 【发布时间】：2015-08-02 18:11:57 【问题描述】：我关注了this 用于使用 DataTables 插件启用多个表（在同一页面上）。 对于手动表，它可以工作，但对于动态创建的表，它会显示以下错误：
我的页面脚本：
$(document).ready(function()
$('table.datatable').dataTable(
'bSort': false,
'aoColumns': [
sWidth: "45%", bSearchable: false, bSortable: false ,
sWidth: "45%", bSearchable: false, bSortable: false ,
sWidth: "10%", bSearchable: false, bSortable: false
],
"scrollY": "200px",
"scrollCollapse": false,
"info": true,
"paging": true
);
);
我的 html 第一个表格：
<table class="table table-striped table-bordered datatable">
<thead>
<tr>
<th> Issue </th>
<th> Product </th>
<th> Qty </th>
<th class="text-right"> Paid </th>
<th class="text-right"> Balance </th>
<th class="text-right"> Total </th>
</tr>
</thead><!-- table head -->
<tbody>
<tr>
<td>May 20, 2015</a></td>
<td>Normal Sim</td>
<td>1000</td>
<td><span class="pull-right">Rs18,893.00 </span></td>
<td><span class="pull-right">Rs131,107.00 </span></td>
<td><span class="pull-right">Rs150,000.00 </span></td>
</tr>
<tr>
<td>voice/7?invoice_type=1">May 20, 2015</a></td>
<td>Nokia 3310 </td>
<td>10000</td>
<td><span class="pull-right">Rs2,520,000.00 </span></td>
<td><span class="pull-right">Rs12,480,000.00 </span></td>
<td><span class="pull-right">Rs15,000,000.00 </span></td>
</tr>
<tr>
<td>May 20, 2015</a></td>
<td>Nokia 3310 </td>
<td>1000</td>
<td><span class="pull-right">Rs404,000.00 </span></td>
<td><span class="pull-right">Rs1,096,000.00 </span></td>
<td><span class="pull-right">Rs1,500,000.00 </span></td>
</tr>
</tbody>
</table>
第二张桌子：
<table class="table table-striped table-bordered datatable" id="p_history">
<thead>
<tr>
<th>Issue</th>
<th>Paid</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
<tr>
<td>May 20, 2015, 5:15 pm</td>
<td>Rs 15,000.00 </td>
<td></td>
</tr>
<tr>
<td>May 20, 2015, 5:15 pm</td>
<td>Rs 12.00 </td>
<td></td>
</tr>
<tr>
<td>May 20, 2015, 5:15 pm</td>
<td>Rs 123.00 </td>
<td></td>
</tr>
<tr>
<td>May 20, 2015, 5:15 pm</td>
<td>Rs 123.00 </td>
<td></td>
</tr>
</tbody>
</table>
知道如何解决吗？
注意：我还阅读了this未回答的问题，同样的错误，但我的标准不同，因此它不是重复的。
【问题讨论】：
显示您的 html 代码以便更好地理解 根据usage guide，您的表中需要有thead 和tbody。你缺少其中任何一个吗？
我更新了问题
因为我已经有这方面的经验，你应该检查以下内容：- 如果你有 tbody 和 thead 标签 - 如果你有相同数量的行和列（th 和 tb 必须有相同的数量)
【参考方案1】：
原因
您正在尝试使用相同的选项初始化多个表，最重要的是aoColumns，数组包含列定义。您的 aoColumns 数组仅包含 3 个项目，但是每个表中的列数不同，这就是您收到错误的原因。
来自manual：
aoColumns: 如果指定，那么这个数组的长度必须相等 到原始 HTML 表中的列数。在哪里使用'null' 您希望仅使用默认值并自动检测到 选项。
解决方案
您需要为第一个表分配唯一的id，并分别初始化每个表，如下所示。
$(document).ready(function()
$('#table_first').dataTable(
'bSort': false,
'aoColumns': [
sWidth: "15%", bSearchable: false, bSortable: false ,
sWidth: "15%", bSearchable: false, bSortable: false ,
sWidth: "15%", bSearchable: false, bSortable: false ,
sWidth: "15%", bSearchable: false, bSortable: false ,
sWidth: "15%", bSearchable: false, bSortable: false ,
sWidth: "15%", bSearchable: false, bSortable: false ,
],
"scrollY": "200px",
"scrollCollapse": false,
"info": true,
"paging": true
);
$('#p_history').dataTable(
'bSort': false,
'aoColumns': [
sWidth: "45%", bSearchable: false, bSortable: false ,
sWidth: "45%", bSearchable: false, bSortable: false ,
sWidth: "10%", bSearchable: false, bSortable: false
],
"scrollY": "200px",
"scrollCollapse": false,
"info": true,
"paging": true
);
);<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<table class="table table-striped table-bordered datatable" id="table_first">
<thead>
<tr>
<th> Issue </th>
<th> Product </th>
<th> Qty </th>
<th class="text-right"> Paid </th>
<th class="text-right"> Balance </th>
<th class="text-right"> Total </th>
</tr>
</thead><!-- table head -->
<tbody>
<tr>
<td>May 20, 2015</a></td>
<td>Normal Sim</td>
<td>1000</td>
<td><span class="pull-right">Rs18,893.00 </span></td>
<td><span class="pull-right">Rs131,107.00 </span></td>
<td><span class="pull-right">Rs150,000.00 </span></td>
</tr>
<tr>
<td>voice/7?invoice_type=1">May 20, 2015</a></td>
<td>Nokia 3310 </td>
<td>10000</td>
<td><span class="pull-right">Rs2,520,000.00 </span></td>
<td><span class="pull-right">Rs12,480,000.00 </span></td>
<td><span class="pull-right">Rs15,000,000.00 </span></td>
</tr>
<tr>
<td>May 20, 2015</a></td>
<td>Nokia 3310 </td>
<td>1000</td>
<td><span class="pull-right">Rs404,000.00 </span></td>
<td><span class="pull-right">Rs1,096,000.00 </span></td>
<td><span class="pull-right">Rs1,500,000.00 </span></td>
</tr>
</tbody>
</table>
<table class="table table-striped table-bordered datatable" id="p_history">
<thead>
<tr>
<th>Issue</th>
<th>Paid</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
<tr>
<td>May 20, 2015, 5:15 pm</td>
<td>Rs 15,000.00 </td>
<td></td>
</tr>
<tr>
<td>May 20, 2015, 5:15 pm</td>
<td>Rs 12.00 </td>
<td></td>
</tr>
<tr>
<td>May 20, 2015, 5:15 pm</td>
<td>Rs 123.00 </td>
<td></td>
</tr>
<tr>
<td>May 20, 2015, 5:15 pm</td>
<td>Rs 123.00 </td>
<td></td>
</tr>
</tbody>
</table>链接
有关此错误和其他常见控制台错误的更多信息，请参阅 jQuery DataTables: Common javascript console errors。
【讨论】：
【参考方案2】：如 DataTables usage guide 中所述，您需要在表中同时声明 thead 和 tbody 部分才能使插件正常工作。
这件事之前也讨论过here at SO，所以下次谷歌搜索或SO搜索可能是件好事。
【讨论】：
有趣的是，我用谷歌搜索了好几次，都没有找到问题所在。幸运的是，我阅读了您针对其他解决方案的答案，并且我得到了解决。谢谢。 我用谷歌搜索并被直接带到了这个问题，所以这是一个很好的问题 @RodneyEllis 我从来没有说过这个问题不好。我只是说之前在这里讨论过。【参考方案3】：如果您的 aaData 是数组数组，例如 [["col11","col12","col13"],["col21","col22","col23"]]，
那么只有上面的代码才能工作，否则它会期望将 mdata 属性设置为 col 值，例如 aaData=[col1:"col1val",col2:"col2val",col3:"col3val"],
映射 aoColumns-
所以在 aoColumns :[mdata:"col1"]
这样做 -
$(document).ready(function()
$('#p_history').dataTable(
'bSort': false,
'aoColumns': [
sWidth: "45%", bSearchable: false, bSortable: false ,
sWidth: "45%", bSearchable: false, bSortable: false ,
sWidth: "10%", bSearchable: false, bSortable: false ,
//match the number of columns here for table1
],
"scrollY": "200px",
"scrollCollapse": false,
"info": true,
"paging": true
);
//Now for another table
$('#secondTableId').dataTable(
'bSort': false,
'aoColumns': [
sWidth: "45%", bSearchable: false, bSortable: false ,
sWidth: "45%", bSearchable: false, bSortable: false ,
sWidth: "10%", bSearchable: false, bSortable: false ,
//match the number of columns here for table2
],
"scrollY": "200px",
"scrollCollapse": false,
"info": true,
"paging": true
);
);
【讨论】：
你在使用服务器端分页吗？ 我认为您遇到了问题，因为您正在创建两个具有相同类名的数据表。尝试为每个表提供不同的 id，然后在您的文档中准备好实例化数据表，例如 $('#id1').dataTable(..your code), $('#id2').dataTable(..your code ) 只需在准备好的文档中尝试此操作即可 $("#p_history").datatable(); 我检查过它工作正常，但有两个表不工作【参考方案4】：我在使用 id 名称（如 k_something_1）时收到此错误。 我通过将其“重命名”为 ksomething1 来解决它。
【讨论】：
以上是关于未捕获的类型错误：无法读取未定义的属性“mData”的主要内容，如果未能解决你的问题，请参考以下文章
数据表插件错误未捕获的类型错误：无法读取未定义的属性“mData”
jQuery DataTables：未捕获的 TypeError：无法读取未定义的属性“mData”
错误类型错误：无法读取未定义 Angular 6 的属性“mData”