0

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 which will create a new row manually                   
  );

}
last = group;

How would I go about then retrieving the server side data to inject here? Is an ajax call possible from within drawCallback? If so, how could I do this?

Rahul Kumar
  • 3,009
  • 2
  • 16
  • 22
Dion
  • 136
  • 1
  • 2
  • 15
  • I'm not sure I understand. You want a static table but then to add further rows retrieved via an AJAX call? And the rows to be inserted in the correct order? If so then that's easy enough to do I think... – annoyingmouse Sep 08 '17 at 10:50
  • Something like this: https://jsfiddle.net/annoyingmouse/872pbcoz/ ? – annoyingmouse Sep 08 '17 at 10:56
  • That's about right. Only the ajax inserted rows have to appear under every row grouping. – Dion Sep 08 '17 at 10:57
  • Can you institute some ordering then - it might have to be a custom ordering to suit your purposes, but then you're laughing! You can order on hidden rows, which might suit your purposes well...? Perhaps a sample of your existing and AJAXed data would help? – annoyingmouse Sep 08 '17 at 11:12

1 Answers1

0

You might be able to simplify your table creation by doing it through javascript, as I describe on this page: Generate another HTML table in JQuery to type in more hours to be calculated

When you update it with your ajaxed in data, you essentially rewrite the whole table with the new information using a for loop to add in each row.

Does that address your needs?