Associate row as a child to another row

laveroni

Hi, I am trying to add rowGrouping to my datatable with the functionality to collapse and expand the row groups. I know this isn't supported by the rowGroup extension, but I need to find a workaround to make it work.

I have tried storing the ids of the rows themselves and attempting to hide() them, but the problem I have here is the space that the rows would have taken is left as empty space, the row is simply hidden but then you can still scroll through where the rows would have been, their content is just hidden. I want to completely hide the rows when they're collapsed.

Maybe I can pursue this another way, by associating rows to a parent row group row and then toggling their visibility just like the child rows are implemented. Is this a possibility? Or does anyone have a workaround to add collapsing to the rowGroup extension?

allan

Hi,

Thanks for your question. I've been thinking about this overnight and I think I can come up with a workaround (using display: none on the displayed tr elements as the row is drawn), but one thing it wouldn't take into account is the paging length. For example, if you had a single group displayed, and paging set at 10 rows, then collapsed the group, there wouldn't be more records suddenly shown - it would just the the collapsed group.

If paging wasn't enabled, that wouldn't be an issue since artefact only visually effects the table when paging is enabled.

Does that sound like a reasonable and workable compromise for your use case?

Thanks,
Allan

laveroni

Thanks Allan, it definitely sounds like it will help my use case. I'll try to implement that and will follow up with the results. Thank you!

laveroni

@allan

For anyone with a similar issue of wanting collapse/expand functionality for rowgrouping:

Group the table and then iterate through each row Group like so:

   g_oTable.page.len(-1);
   g_oTable.rowGroup().enable().draw();
    
    var rowGroupData = {};
    $('.group').each(function(i, obj) {
        $(this).attr('id', i);
        rowGroupData[i] = { open: false };
        
        $(obj).nextUntil('tr.group').each(function() {
            $(this).hide();
        });
    });

This gives each group a unique id and I stored it's status of open/closed in rowGroupData and hide all the rows. Then I have an event handler for the rows that will toggle rowGroupData's open status and the visibility of the rows for that particular row group id.

This was leaving a lot of empty scrollable space because the table height was smaller but the scrollbody didn't realize the difference had occurred. I solved this with the below:

var tableHeight = $('#tablename').offset().top;
$('#tablename_wrapper > div.dataTables_scroll > div.dataTables_scrollBody > div').height(tableHeight);

This sets the scrollbody height to the actual table height. But the crucial line was in the first line of the first code block

g_oTable.page.len(-1);

This sets the internal pagination of the datatable to 1 page so that you don't lose any data potentially on another page when resetting the scrollbody height.

allan

Awesome! Thanks for posting back with this.

Allan