Javascript 未捕获的类型错误：无法读取未定义的属性“mData”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30367590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Cannot read property 'mData' of undefined
提问by Abdul Manan
i followed thisfor enabling multiple tables(on same page) using DataTables plugin. for manual tables it work but for dynamic created tables it shows the following error:
我按照此使用 DataTables 插件启用多个表（在同一页面上）。对于手动表，它可以工作，但对于动态创建的表，它显示以下错误：
Uncaught TypeError: Cannot read property 'mData' of undefined
未捕获的类型错误：无法读取未定义的属性“mData”
my page srcipt:
我的页面源代码：
$(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
} );
} );
my HTML first table:
我的 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>
second 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>
any idea how to fix?
知道如何解决吗？
Note:i also read thisUnanswered Question, same error but mine is different criteria therefore it is not a duplicate.
注意：我也阅读了这个未回答的问题，同样的错误，但我的标准不同，因此它不是重复的。
回答by Gyrocode.com
CAUSE
原因
You are trying to initialize multiple table with the same options, the most important one is aoColumns, array holding column definitions. Your aoColumnsarray holds 3 items only, however the number of columns differ in each tables, that is why you receive an error.
您正在尝试使用相同的选项初始化多个表，最重要的是aoColumns，包含列定义的数组。您的aoColumns数组仅包含 3 个项目，但是每个表中的列数不同，这就是您收到错误的原因。
From the manual:
从手册：
aoColumns: If specified, then the length of this array must be equal to the number of columns in the original HTML table. Use 'null' where you wish to use only the default values and automatically detected options.
aoColumns: 如果指定，则此数组的长度必须等于原始 HTML 表中的列数。在您希望仅使用默认值和自动检测选项的地方使用 'null'。
SOLUTION
解决方案
You need to assign unique idto the first table and initialize each table separately as shown below.
您需要为id第一个表分配 unique并分别初始化每个表，如下所示。
$(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>LINKS
链接
See jQuery DataTables: Common JavaScript console errorsfor more information on this and other common console errors.
有关此错误和其他常见控制台错误的更多信息，请参阅jQuery 数据表：常见 JavaScript控制台错误。
回答by BudwiseЯ
As stated in the DataTables usage guide, you need to have both theadand tbodysections declared in your table to get the plugin work correctly.
如 DataTables使用指南中所述，您需要在表中声明thead和tbody部分才能使插件正常工作。
This thing has also been discussed here at SObefore, so some Googling or SO search might be a good thing next time.
之前在 SO上也讨论过这件事，所以下次使用谷歌搜索或 SO 搜索可能是件好事。
回答by Waqar
If your aaData is an array of array e.g [["col11","col12","col13"],["col21","col22","col23"]],
then only your above code will work else it will expect an mdata attribute to set to the col value e.g., aaData=[{col1:"col1val",col2:"col2val",col3:"col3val"}],
如果你的 aaData 是一个数组数组 eg [["col11","col12","col13"],["col21","col22","col23"]]，那么只有你上面的代码可以工作，否则它会期望一个 mdata 属性设置为 col 值，例如aaData=[{col1:"col1val",col2:"col2val",col3:"col3val"}]，
Map aoColumns-
so in aoColumns :[{mdata:"col1"}]
映射 aoColumns- 所以在 aoColumns 中：[{mdata:"col1"}]
Do this -
做这个 -
$(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
} );
} );
回答by PJunior
I got the this error while I was using idnames like k_something_1. I solved it by 'renaming' it to ksomething1.
我在使用像k_something_1这样的id名称时遇到了这个错误。我通过将其“重命名”为ksomething1来解决它。
