Nested tablesorters & columnSelector widget

[monkeyden]

tablesorter v2.23.5 columnSelector v2.23.2 nested tablesorters

I have a fairly complex application of tablesorter that makes use of several widgets, including columnSelector, along with nested tablesorters. The basic nesting and toggling the parent columns with columnSelector work great for the current requirements but when we toggle the columns on the parent table it seems to also be toggling the columns of the nested tables. I think I have narrowed the issue down to the updateCols function in columnSorter, which is responsible for adding the following styles to hide columns:

.tablesortera66e39306804ecolumnselector col:nth-child(6), .tablesortera66e39306804ecolumnselector_extra_table col:nth-child(6), .tablesortera66e39306804ecolumnselector tr th:nth-child(6), .tablesortera66e39306804ecolumnselector_extra_table tr th:nth-child(6), .tablesortera66e39306804ecolumnselector tr td:nth-child(6), .tablesortera66e39306804ecolumnselector_extra_table tr td:nth-child(6)

The result is, when column 6 of the parent table is toggled/hidden, column 6 of all the nested tables is also toggled/hidden via these styles. The child tables are different attributes of a different entity type and shouldn't be affected by the toggling parent columns.

I guess ideally there would be a CSS flag that tells columnSelector to ignore the column (sort of like what we do with tablesorter-childRow), but I didn't find anything in the tablesorter or columnSelector documentation. Is there such a thing? If not, any thoughts on short term workaround? I should note, this is a very old web application that will likely be rewritten soon, but this feature will need to go out in the next release in the meantime.

Great, feature-rich plugin by the way, and your support/replies on StackOF back in the day is legendary.

Thanks.

[Mottie]

Hi @monkeyden!

Thanks! Now that I have a kid, it's hard to maintain the same level of work that I used to.

I think if you modify the column selector to include > thead > tr > th and > tbody > tr > td then it'll fix your issue, e.g.

.tablesortera66e39306804ecolumnselector > col:nth-child(6),
.tablesortera66e39306804ecolumnselector_extra_table > col:nth-child(6),
.tablesortera66e39306804ecolumnselector > thead > tr > th:nth-child(6),
.tablesortera66e39306804ecolumnselector_extra_table > thead > tr > th:nth-child(6),
.tablesortera66e39306804ecolumnselector > tbody > tr > td:nth-child(6),
.tablesortera66e39306804ecolumnselector_extra_table > tbody > tr > td:nth-child(6)

Please let me know if that fixes it.

[monkeyden]

Thanks! Now that I have a kid, it's hard to maintain the same level of work that I used to.

I feel that. Don't know how recent but "Congrats!" regardless.

This worked splendidly. For posterity, I just changed these three lines that (re)initialize the temp variable.

updateCols: function(c, wo) {
    if (wo.columnSelector_mediaquery && c.selector.auto || c.selector.isInitializing) {
        return;
    }
    var column, temp,
        colSel = c.selector,
        styles = [],
        prefix = c.namespace + 'columnselector';
    colSel.$container.find('input[data-column]').filter('[data-column!="auto"]').each(function(){
        if (!this.checked) {
            column = parseInt( $(this).attr('data-column'), 10 ) + 1;
                        // **Change here**
            temp = ' > col:nth-child(' + column + ')';
            styles.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
                        // **Change here**
            temp = ' > thead > tr th:nth-child(' + column + ')'; 
            styles.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
                        // **Change here**
            temp = ' > tbody > tr > td:nth-child(' + column + ')'; 
            styles.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
        }
        $(this).toggleClass( wo.columnSelector_cssChecked, this.checked );
    });
    if (wo.columnSelector_mediaquery){
        colSel.$breakpoints.prop('disabled', true);
    }
    if (colSel.$style) {
        colSel.$style.prop('disabled', false).html( styles.length ? styles.join(',') + ' { display: none; }' : '' );
        console.log("colSel: " + JSON.stringify(colSel.$style));
    }
    if (wo.columnSelector_saveColumns && ts.storage) {
        ts.storage( c.$table[0], 'tablesorter-columnSelector', colSel.states );
    }
    c.$table.trigger(wo.columnSelector_updated);
}

Again, I can't thank you enough, not only for the assist here but all the fantastic answers I have already benefitted from.

[Mottie]

I think this line also needs the > added

temp = ' > col:nth-child(' + column + ')';

[monkeyden]

I think this line also needs the > added

temp = ' > col:nth-child(' + column + ')';

Good spot. Updated the example.

[monkeyden]

I guess I spoke a little too soon. Toggling the first option of the columnSelector hides the entire nested table (which happens to be in the 2nd column of the parent table). This selector seems to be the one affecting it:

.tablesortered2ab7ad63632columnselector > tbody > tr > td:nth-child(2)

Is there a way to further qualify it to prevent this behavior?

[Mottie]

Is the nest table in the first column? Or are you using a colspan - I think this may help, maybe?

[monkeyden]

Correct, all interior rows, absent first and last of the parent row.

The parent rows have:

1. A checkbox in column 1
2. A list of columnSelector-controlled columns
3. An "Actions" column with icons to modify parent rows

The child rows are like so:

1. non-breaking space (so it doesn't sit below the parent row checkbox)
2. The nested table spans all "interior" columns
3. non-breaking space (so it doesn't sit below the parent "Actions" column)

So all columns except the "bookends", so to speak. I hope this paints a picture.