dataTables, nested tables foreach - php

Question

I have a problem with datatable, it's working but it's not working right..
I have the next code:
<table id="dt_basic" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th>Codigo PT</th>
<th><i class="text-muted hidden-md hidden-sm hidden-xs"></i>Producto Terminado</th>
</tr>
</thead>
<tbody>
<?php
foreach ($registros as $reg)
{
?>
<tr style="border-bottom:2px solid #000;background: #cee8ff;">
<td><?php echo $reg -> id_codigo;?></td>
<td><?php echo utf8_encode($reg ->id_product_term);?></td>
</tr>
<?php
$AllRows = $_interfaz -> get_all($reg -> id_interfaz);
foreach ($AllRows as $row)
{
?>
<tr>
<td><b style="font-size:20px;">—</b></td>
<td><?php echo $row -> id_product_term;?></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
It has a forearch() { forearch() { } } two foreach, a nested foreach.
The problem is that the datatable put the first foreach result at last and the result of the nested (SECOND) foreach in the beginning, like this:
second foreach result
second foreach result
second foreach result
first foreach result
first foreach result
first foreach result
why does datable organize the table as above?
why does not it do this?:
first foreach result
second foreach result
first foreach result
second foreach result
first foreach result
second foreach result
because one foreach is nested..
how can i fix it?
my js script is:
$('#dt_basic').dataTable({
"sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>"+
"t"+
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
"autoWidth" : true,
"oLanguage": {
"sSearch": '<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>'
}});
Thanks.

Answer 1

why does datable organize the table as above?
Because dataTables is ordering the rows by default as [[0, 'asc']]. Thats why all your rows with
<tr><td><b style="font-size:20px;">—</b></td>...</tr>
is shown first. There is a extension called rowGroup which purpose is exactly what you are trying to do. Include the rowGroup source, then add an extra invisible column to group by :
<tr style="border-bottom:2px solid #000;background: #cee8ff;">
<td><?php echo $reg -> id_codigo;?></td>
<td><?php echo $reg -> id_codigo;?></td>
<td><?php echo utf8_encode($reg ->id_product_term);?></td>
</tr>
...
<tr>
<td><?php echo $reg -> id_codigo;?></td>
<td><b style="font-size:20px;">—</b></td>
<td><?php echo $row -> id_product_term;?></td>
</tr>
Make the new group column invisible and rowGroup that column :
$('#dt_basic').dataTable({
columnDefs: [
targets: 0, visible: false }
],
rowGroup: {
dataSrc: 0
}
...
})
Here is an example of using rowGroup upon an invisible column -> http://jsfiddle.net/8r88gsfk/