Answers

• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2023 Answer ✓

  but all of the test files are now closed.

  If the are using http://live.datatables.net/ they shouldn't be closed. Likely your browser is trying to use SSL but the url needs http:// not https://. Try a different browser.

  I KNOW the issue has to do with my naming scheme, but I simply can't get it.

  Yes, it seems pretty complicated what you setup. See if this example from this thread helps.

  What is the best way to get my automatic row indexing to restart after each group?

  Your order / search event is applying the index. This is independent of the rowGroup. I would look at using a variable to keep track of the current value in the date column and when it changes reset the index counter. Based on the loop you are using you will need to create your own index counter and increment or reset it within the loop.

  Kevin
• thegamechangerpro Posts: 81Questions: 30Answers: 1

  January 2023

  Kevin,

  This is so helpful! Thank you!

  The last issue I am dealing with is trying to apply the expand and collapse function to only a button that I have added to the group row (instead of the whole group row itself).

  I am failing all over the place.

  I figure i need to change tr.dtrg-start in the on-click to the button id, but no matter what I try it breaks the expand and collapse

  my fiddle:
  https://jsfiddle.net/thegamechangerpro/n9ys3x0r/27/

  var toggleClass = collapsed ? "fa fa-fw fa-caret-right fa-lg toggler" : "fa fa-fw fa-caret-down fa-lg toggler ";
  rows.nodes().each(function(r) {r.style.display = (collapsed ? 'none' : '');});
  return $('<tr/>').append('<td colspan="4"><button class="btn btn-default" type="button" id="testid"><span class="' + toggleClass + '"></button>' + group + '</td>').append('<td colspan="15">(' + rows.count() + ')</td>').attr('data-name', groupAll).toggleClass('collapsed', collapsed);

  $('#table tbody').on('click', 'tr.dtrg-start', function() {
  var pos = $('div.dataTables_scrollBody').scrollTop();
  var name = $(this).data('name');
  collapsedGroups[name] = !collapsedGroups[name];
  table.draw(false);
  $('.dataTables_scrollBody').scrollTop(pos);
  } );
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2023 Answer ✓

  Something like this works:

  $('#table tbody').on('click', 'tr.dtrg-start td button', function() {
              var tr = $(this).closest('tr');  // Get the clicked tr
              var pos = $('div.dataTables_scrollBody').scrollTop();
              var name = $(tr).data('name');  // Get the name of the clicked tr
              collapsedGroups[name] = !collapsedGroups[name];
              table.draw(false);
              $('.dataTables_scrollBody').scrollTop(pos);
      } );
  

  https://jsfiddle.net/o80z6yd1/1/

  You don't want to use id because they are expected to be unique on the page. Likely the issue is you need to adjust the code a bit to find the tr, that the clicked button is on, to get the tr name. I added line 2 and changed line 4.

  Kevin
• thegamechangerpro Posts: 81Questions: 30Answers: 1

  January 2023

  Oh, I see! That make sense.

  Thanks again for everything.