RowGroup Extension for row with rowspan

czkoudy

Hi All,

I am trying to display data from DB. All works fine but now iam facing an issue with rowspan.

Basically for each piece of data i need to render the following:

<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>

<tr>

<td></td>
<td></td>
</tr>

I have been looking through the forum and google and but couldn't find this exact scenario. Also, I am fairly new to javascript so it's all too new to me.

If anyone could point me into the right direction it would be greatly appreciated

Thanks,

Jakub

kthorngren

Datatables doesn't support using colspan or rowspan in the table itself. See the HTML Requirements doc. Is that what you are asking?

Or are you trying to use rowspan with the RowGroup created row?

Kevni

czkoudy

Hi,

Thanks for your reply. I am trying to use rowspan with the RowGroup created row.

I am confused with the startRender and endRender functions.

kthorngren

There is a running example here:
https://datatables.net/extensions/rowgroup/examples/initialisation/startAndEndRender.html

What specifically are your questions?

Kevin

czkoudy

const data = <?php echo json_encode($all_links); ?>;


$('#report_table').dataTable({

  data: data,
  columns: [
    {
      title: 'ID'
    },
    {
      title: "Autotask"
    },
    {
      title: "Eclipse"
    }
  ],
  rowGroup: {
    dataSrc: 0,
    startRender: function ( rows, group ) {
      return $('<tr>')
      .append('<td rowspan="2"></td>')
      .append('<td ></td>')
      .append('<td>'+group+'</td>')
      .append('</tr>');
      }
 }

});

But this will render first row and the the rest is done by datatable rather than rowGroup.

And also how to render the second tr which will have only 2 columns

kthorngren

I think all you need to do is append another row like this:

      return $('<tr>')
      .append('<td rowspan="2"></td>')
      .append('<td ></td>')
      .append('<td>'+group+'</td>')
      .append('</tr>')
      .append('<tr>')
      .append('<td ></td>')
      .append('</tr>');

Will let you fill in what you want tin the row.

Kevin

czkoudy

this doesnt work because the .append will append to the same tr element.

  rowGroup: {
    dataSrc: 'id',
    startRender: function ( rows, group ) {
      return $('<tr>')
      .append('<td rowspan="2">'+group+'</td>')
      .append('<td ></td>')
      .append('<td></td>')
      .append('<td></td>')
      .append('<td ></td>')
      .append('<td></td>')
      .append('<td></td>')
      .append('</tr>')
      },
      endRender: function ( rows, group ) {
      return $('<tr>')
      .append('<td ></td>')
      .append('<td></td>')
      .append('<td></td>')
      .append('<td ></td>')
      .append('<td></td>')
      .append('<td></td>')
      .append('</tr>')
      },

 }

When i do this like above its going in the right direction, however looks like this

from that you can see that the first row is done by rowGroup, second one is by datatable, then its correctly 2 rows by row group. The next few are as they should but then the last row is done by rowGroup.endrender.

Iam really confused now haha

kthorngren

Looks like you can build the rows into a string then just append the string. For example:
http://live.datatables.net/maxefoxi/1/edit

Kevin