jQuery Datatables大数据集未捕获TypeError：无法读取未定义的属性“mData” [英] jQuery Datatables large data set Uncaught TypeError: Cannot read property 'mData' of undefined
问题描述
所以我收到了一个大型的行的控制台错误，我从php的数据库迭代。我用这个metronic主题来初始化它。你可以看到我有我的这个和tbody。
So I get a console error on a large set of rows that I'm iterating from a database with php. I am initializing this with the metronic theme. As you can see I have my thead and tbody.
我怀疑这个问题可能与输出的大小有关，也许需要使用另一种方法， / p>
I suspect the issue could pertain to the size of the output and maybe needing to use another method, any guidance appreciated
<table id="sample_1" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="table-checkbox">
<input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes"/>
</th>
<th>Name</th>
<th>Source</th>
<th>Email</th>
<th>Customer</th>
<th>Created</th>
<th>Login</th>
<th>Active</th>
<th>Role</th>
<th>Incentive</th>
<th>View</th>
<th>Switch</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<?php
$users=user::get_all($filter);
if($users){
foreach($users as $row){
$customer=user::get_cutomer_name_by_source_id($row['source_id']);
?>
<tr class='odd gradeX'>
<td><input type='checkbox' class='checkboxes' value='1'/></td>
<td><?php echo $row['first_name']." ".$row['last_name']; ?></td>
<td><?php echo $row['source_id']; ?></td>
<td><?php echo $row['email']; ?></td>
<td><?php echo $customer; ?></td>
<td><?php echo date("m/d/Y", strtotime($row["created"])); ?></td>
<td><?php if($row['login']!=NULL){echo date("m/d/Y",$row['login']);} ?></td>
<td><?php if($row['active']==1){echo "Yes";}else{echo "No";} ?></td>
<td><?php echo user::get_role_name($row['rid']); ?></td>
<td><?php
if($row['cash_incentive']==1){echo "Cash";}else{echo "Regular";} ?>
</td>
<td><a href='user-edit?uid="<?php echo $row['uid']; ?>"'>View </a></td>
<td><a href='switch?email="<?php echo $row['email']; ?>"'> Switch</a></td>
<td><input type='checkbox' name='email-list[]' value='<?php echo $row['email']; ?>'></td>
</tr>
<?php }
}
?>
</tbody>
这里是metronic init对于datatable：
And here is the metronic init for the datatable:
table.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing1 _START_ to _END_ of _TOTAL_ entries1",
"infoEmpty": "No entries found",
"infoFiltered": "(filtered1 from _MAX_ total entries)",
"lengthMenu": "Show _MENU_ entries",
"search": "Search:",
"zeroRecords": "No matching records found"
},
// Or you can use remote translation file
//"language": {
// url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
//},
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
"bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.
"columns": [{
"orderable": false
}, {
"orderable": true
}, {
"orderable": false
}, {
"orderable": false
}, {
"orderable": true
}, {
"orderable": true
}, {
"orderable": true
}, {
"orderable": true
}, {
"orderable": true
}, {
"orderable": true
}, {
"orderable": true
}, {
"orderable": false
}],
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength": 5,
"pagingType": "bootstrap_full_number",
"language": {
"search": "My search: ",
"lengthMenu": " _MENU_ records",
"paginate": {
"previous":"Prev",
"next": "Next",
"last": "Last",
"first": "First"
}
},
"columnDefs": [{ // set default column settings
'orderable': false,
'targets': [0]
}, {
"searchable": false,
"targets": [0]
}],
"order": [
[1, "asc"]
] // set first column as a default sort by asc
});
推荐答案
原因
由 列指定的阵列中的项目数量 选项应匹配< td> 元素的数量。您在 列中有12个元素 数组和13 < td> 元素。
CAUSE
Number of items in array specified by columns option should match number of <td> elements. You have 12 elements in columns array and 13 <td> elements.
从手册：
请注意，如果您使用
列来定义您的列，您必须在表中的每个列的数组中都有一个条目（这些列可以是null如果你不指定任何选项）。
Note that if you use
columnsto define your columns, you must have an entry in the array for every single column that you have in your table (these can benullif you don't which to specify any options).
解决方案
将额外的对象添加到列数组中以匹配HTML中的列数。
SOLUTION
Add extra object to columns array to match number of columns in the HTML.
或者，您可以将列替换为 columnDefs ，以便可读性。
Alternatively you can replace columns with columnDefs entirely for readability.
"columnDefs": [{
"orderable": false,
"searchable": false,
"targets": [0]
}, {
"orderable": false,
"targets": [2, 3, 11, 12]
}
],
这篇关于jQuery Datatables大数据集未捕获TypeError：无法读取未定义的属性“mData”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
