Collapse / Expand Click Groups

Collapse / Expand Click Groups

thowithowi Posts: 51Questions: 6Answers: 0

Hi all together,

https://datatables.net/extensions/rowgroup/examples/initialisation/customRow.html

I like to have a possibility to click on the group name like "Averages for Edinburgh" and the group should expand/collapse. Per default when loading the site, the group should be collapsed.

For doing that, I also found this thread here, where redwall was able to embed such a function for his DataTable:
https://datatables.net/forums/discussion/comment/61474/#Comment_61474

But my Javascript skills are less than available :)

Would someone of you be so kind and help me out here? How can I reach the above described functionality on the basic example of "Custom row rendering / aggregates"?

Thank you for your help!!

Replies

  • colincolin Posts: 2,748Questions: 0Answers: 480

    Hi @thowi,

    See this example from this thread,

    Cheers,

    Colin

  • thowithowi Posts: 51Questions: 6Answers: 0

    Hi Colin! Wow, thank you - great example, exactly what I looked for and I also got it running in my application :smiley:

    Can you please also help me out on the issue "Per default when loading the site, the group should be collapsed."?

    Which part do I need to change so the site will start in collapsed mode?

    Thank you for your help!!

  • colincolin Posts: 2,748Questions: 0Answers: 480

    Hi @thowi ,

    This will do it! Hope that does the trick,

    Cheers,

    Colin

  • thowithowi Posts: 51Questions: 6Answers: 0

    Thank you @colin! I see the change.
    You added the following lines ahead of the last block from the previous example.

    $('#example tbody tr.group-start').each(function() {
        var name = $(this).data('name');
        collapsedGroups[name] = !collapsedGroups[name];
      });
      table.draw(false);
    

    When I add this snipped to the previous example it works just fine! But when I add it to my file at the same place, it doesn't work - and doesn't work mean, that it starts "open" and won't collapse on click any more. So, completely broken.

        // Collapse Groups
    $('#example tbody tr.group-start').each(function() {
        var name = $(this).data('name');
        collapsedGroups[name] = !collapsedGroups[name];
     });
     example.draw(false);
            
    $('#example tbody').on('click', 'tr.group-start', function () {
          var name = $(this).data('name');
          collapsedGroups[name] = !collapsedGroups[name];
          example.draw(false);
     });
    

    I also checked the javascript console in my browser - no errors, no warnings.
    Do you have any clue which things can block the snipped?
    This is my current project where I added the snipped to line 134.

    Thank you for your time! I really appreciate your help here!

  • colincolin Posts: 2,748Questions: 0Answers: 480

    That's a private paste, I haven't got permission to view it.

    C

  • thowithowi Posts: 51Questions: 6Answers: 0
  • thowithowi Posts: 51Questions: 6Answers: 0

    Maybe much better to use: http://live.datatables.net/surifeda/1/

  • colincolin Posts: 2,748Questions: 0Answers: 480

    Hi @thowi ,

    Thanks for the example. Here you go - the closing of the groups need to happen in the initComplete because of your language config. See this thread here for an explanation.

    Cheers,

    Colin

Sign In or Register to comment.