jQuery Tablesorter Column Selector Widget initially hide column

问题

The example page of this widget mentions a class "columnSelector-false" that should initially hide the column where it is added to the <th> tag. tablesorter column selector example But even on the example page it doesn't work:

<!-- columnSelector-false will initially hide the column -->
<th  class="columnSelector-false" data-priority="6" data-selector-name="Gender">Sex</th>

When you load the page, the Popup selector is set to "Auto", but even when I remove "Auto" the "Gender" column still shows. Perhaps I missunderstand the meaning of "initially hide the column", but in that case I wonder what other meaning it has...

Hint: The column selector widget does not work with colspan but you can use the <caption> tag instead if it is inserted before the <thead>.

回答1:

Actually, using "columnSelector-false" does work. It doesn't appear to work if you change the column selector checkboxes in that demo because it saves your choices.

I set up this demo which includes a button to clear the saved columnSelector data, to show this behavior.

$('button.columnSelectorButton').click(function(){
    $.tablesorter.storage( $table, 'tablesorter-columnSelector', [] );
    $.tablesorter.storage( $table, 'tablesorter-columnSelector-auto', {} );
    // reload the page (for this demo only!)
    document.location.reload(true);
});

You can do the same thing by opening the browser development tools and clearing the local storage (press delete after clicking on the entry)

回答2:

As per the example from the plugin page

Remove column from selection popup by including data-priority="Anything other than 1-6" OR data-column-selector="disable" OR class="columnSelector-disable"

<th  class="columnSelector-disable" data-selector-name="Gender">Sex</th>

This will hide the column from the selection popup.

来源：https://stackoverflow.com/questions/29498818/jquery-tablesorter-column-selector-widget-initially-hide-column

标签

jquery

tablesorter