jQuery dataTables 3x3 column with no header
jQuery dataTables 3x3 column with no header
littlechad
Posts: 2Questions: 0Answers: 0
I am using jquery.dataTables (1.8.1) to display a list of data, and I am displaying it into a 3x3 grid. I don't want to use the header since it is not necessary.
Here's my javascript:
[code]$('table.grid_view').dataTable({
"oLanguage": {
"sSearch": "Search:"
},
"bLengthChange": false,
"bFilter": true,
"bSort": false,
"bAutoWidth": false,
"iDisplayLength": 3,
"sPaginationType": "full_numbers",
"aoColumns": [null,null,null]
});[/code]
and here's the table:
[code]
<?php
if (!empty($grid_datas)){
$i = 1;
$index = 0;
foreach ($grid_datas as $grid_data){
$index++;
if($i == 0){ echo '';}
if($index == count($grid_datas)){$colspan = $index % 3;}
else{$colspan = 1;}
?>
<?php echo $grid_data['the_data'];?>
<?php
if($index == count($grid_datas) || $index % 3 == 0){
echo '';
$i = 0;
}else{$i++;}
}?>
<?php }else{?>
No data Found
<?php }?>
[/code]
actually this pretty much work, but the datatable is alerting message
[quote]DataTables warning: Requested unknown parameter '2' from the data source for row 3[/quote]
and when I check it in firebug, here's what happens:
[quote]DataTables warning: Unexpected number of TD elements. Expected 12 and got 11. DataTables does not support rowspan / colspan in the table body, and there must be one cell for each row/column combination.[/quote]
from the sound of it, it seems that I only have 11 `$grid_data` to display while `dataTables` is expecting 12 since the table is resulting 4 rows, and since i didn't initiate any `header(thead)`, it seems that the `dataTable` is generating this on the fly:
[code]
[/code]
I have spent some time modifying the table or the javascript so that it wont give any alert, I have also search for any possible solutions, but none of them seems to work, please help me
and if its not too much too ask, these seems to break the search function, and the data count in dataTable_info, please help.
[1]: http://www.datatables.net/download/
Here's my javascript:
[code]$('table.grid_view').dataTable({
"oLanguage": {
"sSearch": "Search:"
},
"bLengthChange": false,
"bFilter": true,
"bSort": false,
"bAutoWidth": false,
"iDisplayLength": 3,
"sPaginationType": "full_numbers",
"aoColumns": [null,null,null]
});[/code]
and here's the table:
[code]
<?php
if (!empty($grid_datas)){
$i = 1;
$index = 0;
foreach ($grid_datas as $grid_data){
$index++;
if($i == 0){ echo '';}
if($index == count($grid_datas)){$colspan = $index % 3;}
else{$colspan = 1;}
?>
<?php echo $grid_data['the_data'];?>
<?php
if($index == count($grid_datas) || $index % 3 == 0){
echo '';
$i = 0;
}else{$i++;}
}?>
<?php }else{?>
No data Found
<?php }?>
[/code]
actually this pretty much work, but the datatable is alerting message
[quote]DataTables warning: Requested unknown parameter '2' from the data source for row 3[/quote]
and when I check it in firebug, here's what happens:
[quote]DataTables warning: Unexpected number of TD elements. Expected 12 and got 11. DataTables does not support rowspan / colspan in the table body, and there must be one cell for each row/column combination.[/quote]
from the sound of it, it seems that I only have 11 `$grid_data` to display while `dataTables` is expecting 12 since the table is resulting 4 rows, and since i didn't initiate any `header(thead)`, it seems that the `dataTable` is generating this on the fly:
[code]
[/code]
I have spent some time modifying the table or the javascript so that it wont give any alert, I have also search for any possible solutions, but none of them seems to work, please help me
and if its not too much too ask, these seems to break the search function, and the data count in dataTable_info, please help.
[1]: http://www.datatables.net/download/
This discussion has been closed.
Replies
[code]
.grid_view tbody tr{
float:left;
display:inline-table;
}
[/code]
and using this table:
[code]
<?php
if (!empty($grid_datas)){
foreach ($grid_datas as $grid_data){
?>
<?php echo $grid_data['the_data'];?>
<?php }?>
<?php }else{?>
No data Found
<?php }?>
[/code]
but i don't think that this is the best approach, and it might not work on earlier versions of IE