Save state of hidden/toggled children question.

[activecamo]

I am unable to find a discussion on how this example below is able to save the toggle state of the children rows upon a page refresh. Would anyone be able to point me to anything that might be related to accomplishing just that? Im not sure what terms I would use to search for it.

http://mottie.github.io/tablesorter/docs/example-widget-grouping-filter-childrows.html

[Mottie]

Hi @activecamo!

I modified a jsFiddle demo to use the HTML and CSS from that demo. Since the way a child row is set up can vary so much, I'm not sure if a widget will satisfy everyone, but this is the basic code you would need to save the state of the child rows using the setup from that demo (updated demo):

$(function () {

    var $table = $('.tablesorter'),

    // Save Child Row open/closed state; restore on page refresh
    // See https://github.com/Mottie/tablesorter/issues/595
    toggleChildren = function (el, startup) {
        var state = [],
            $rows = $(el)
                // add "opened" class to toggle
                .toggleClass('opened')
                // find parent row
                .closest('tr')
                // find associated child rows
                .nextUntil('tr:not(.tablesorter-childRow)');
        // toggle the cells of the child rows
        $rows.find('td').toggle();
        // get toggle element text
        $table.find('.toggle.opened').each(function(){
            state.push( $(this).text() );
        });
        // save open toggle text
        if (startup !== true) {
            $.tablesorter.storage( $table, 'childRows', state );
        }
    };

    $table.tablesorter({
        theme: 'blue',
        sortList: [[1, 0]],
        widgets: ['group', 'filter'],
        widgetOptions: {
            group_collapsible: true,
            group_collapsed: false,
            group_count: false,
            filter_childRows: true,
        },

        // restore child row states
        initialized : function(){
            $table.find('.tablesorter-childRow td').hide();
            var $cell,
            states = $.tablesorter.storage( $table, 'childRows' ) || [];
            $.each(states, function(i, s){
                $cell = $table.find('.toggle:contains("' + s + '")');
                if ($cell.length) {
                    toggleChildren($cell, true);
                }
            });
        }

    });

    // make toggles clickable
    $table.on('click', '.toggle', function () {
        toggleChildren(this);
        return false;
    });

});

[Mottie]

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue this discussion.