Answers

• allan Posts: 63,552Questions: 1Answers: 10,477 Site admin

  September 2017 Answer ✓

  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 Posts: 3Questions: 1Answers: 0

  October 2017

  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 Posts: 3Questions: 1Answers: 0

  November 2017

  @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 Posts: 63,552Questions: 1Answers: 10,477 Site admin

  November 2017

  Awesome! Thanks for posting back with this.

  Allan