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.
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>
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
});
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.
From the manual:
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).
Add extra object to columns array to match number of columns in the HTML.
Alternatively you can replace columns with columnDefs entirely for readability.
"columnDefs": [{
"orderable": false,
"searchable": false,
"targets": [0]
}, {
"orderable": false,
"targets": [2, 3, 11, 12]
}
],
See jQuery DataTables: Common JavaScript console errors for more information on this and other common console errors.