I'm new to web programming and I'm developing a simple page for the place where I work. I am using the DataTable plugin and I am trying to group all the information about a parameter and that it is broken down when I press a button, as seen in this example:
I already managed to group the information according to the parameter that I chose but the problem I find when I try to add the function of row (). child since I can not find how to add it to the already established code to group my columns. Here is an example of how it looks now:
This is the HTML and JS code of my table:
$(document).ready( function () {
var groupColumn = 1;
var table = $('#table_id').DataTable({
"columnDefs": [
{ "visible": false, "targets": groupColumn }
],
"order": [[ groupColumn, 'asc' ]],
"displayLength": 25,
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="5">'+group+'</td></tr>'
);
last = group;
}
} );
}
} );
// Order by the grouping
$('#table_id tbody').on( 'click', 'tr.group', function () {
var currentOrder = table.order()[0];
if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
table.order( [ groupColumn, 'desc' ] ).draw();
}
else {
table.order( [ groupColumn, 'asc' ] ).draw();
}
} );
} );<table id="table_id" class="table table-striped table-bordered display">
<thead>
<tr>
<th>#</th>
<th>Bras</th>
<th>Direccion IP</th>
<th>Pool</th>
<th>CIDR</th>
<th>Clientes</th>
<th>Instancia</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<?php
Conexion::abrirConexion();
$dhcpcnr = RepositorioCNR::obtenerCNR(Conexion::obtenerConexion());
for ($i = 0; $i < count($dhcpcnr); $i++){
$dhcpcnrActual = $dhcpcnr[$i];
echo '<tr>';
echo '<td>' . $dhcpcnrActual -> obtenerBras() . '</td>';
echo '<td>' . $dhcpcnrActual -> obtenerDireccionip() . '</td>';
echo '<td>' . $dhcpcnrActual -> obtenerPool() . '</td>';
echo '<td>' . $dhcpcnrActual -> obtenerMask() . '</td>';
echo '<td>' . $dhcpcnrActual -> obtenerClientes() . '</td>';
echo '<td>' . $dhcpcnrActual -> obtenerInstancia() . '</td>';
echo '<td>
<button data-toggle="modal" data-target="#informacion" type="button" class="btn btn-info"><i class="fa fa-clipboard-list" aria-hidden="true"></i>
<button id="modificar" type="button" class="btn btn-warning"><i class="fa fa-edit" aria-hidden="true"></i>
<button id="eliminar" type="button" class="btn btn-danger"><i class="fa fa-ban" aria-hidden="true"></i></td>';
echo '</tr>';
}
?>
</tbody>
</table>I already consult the official information for that method but I do not find how to apply it in my case since they apply an example with AJAX and I am getting the info from my DB in another way.
Any comments or support could be very helpful, thank you very much.