RowGroup Extension for row with rowspan

RowGroup Extension for row with rowspan

czkoudyczkoudy Posts: 4Questions: 1Answers: 0

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

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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

  • czkoudyczkoudy Posts: 4Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

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

    What specifically are your questions?

    Kevin

  • czkoudyczkoudy Posts: 4Questions: 1Answers: 0
    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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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

  • czkoudyczkoudy Posts: 4Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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

This discussion has been closed.