Insert additional rows with row grouping

dion1512

I am quite new to this and still trying to understand the fundamentals of datatables. I will try to explain what I am trying to achieve as best as possible.

I have a data table which is produced using straight javascript/html. The data is server side processed (PHP) and rows are generated using a for each loop. This may or may not be relevant to the answer.

<tbody>
<?php if (count($data)): 
foreach ($data as $key => $value): ?>
                
<tr>
<td><?php echo $value['value1'] ?>></td>
<td><?php echo $value['value2'] ?></td>
<td><?php echo $value['value 3'] ?></td>                
</tr>
<?php 
endforeach;
endif; ?>
</tbody>

I have employed row grouping so that results are grouped based on a particular column value. For instance, if column 2 was a date, all rows which have a similar date are grouped under a single header with that date. I have achieved this using the code below which works absolutely fine.

"drawCallback": function ( settings ) {
    var api = this.api();
    var rows = api.rows( {page:'current'} ).nodes();
    var last=null;
    api.column(4, {page:'current'} ).data().each( function ( group, i ) {
       if ( last !== group ) {
       $(rows).eq( i ).before(
           '<tr class="group"><td colspan="5"><strong>'+group+'</strong></td></tr>'
         );
 
         last = group;
        }
 } );
 },

My issue is that I need to inject further rows that are identical to each other and will appear under every group heading that I have created above. The data for these rows will be generated by serverside PHP/SQL.

I've got as far as working out that the following code will allow me to insert rows manually underneath the existing rows of each group.

if ( last == group ) {
$(rows).eq( i ).after(
    //insert html here                      
);
                
}
last = group;

How would I go about then retrieving the server side data to inject here? Is an ajax call possible from within drawCallback?

Any help would be appreciated