Hide Entire Column But Still Filter Table

[avoorhees]

First of all, love the plugin.

I have a use case where I want to hide the entire column (header,input,background of input, and row) but still need to be able to filter the table on this column. I use external buttons to filter instead of having the user type in input box.

table.tablesorter thead tr.tablesorter-filter-row input.disabled { 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
}

The issue with this code is that the filter must be disabled, but I need the filter to still work, just the entire column hidden.

Thanks in advance!

[mohitmayank]

Add a class to the columns. for every row-cell and header. you can use following to add the column class to filters after starting tablesorter -

        var columns = [{
                   fieldClass : 'columnClass'
         }];    //An example columns meta data list with classes, the order should same as the order in the table
       _.each(columns, function(item, index) {
        this.$('.tablesorter-filter-row td:eq(' + index + ')').addClass(item.fieldClass);
    }, this);

for hiding a column, simply hide using the class

$('.columnClass').hide();

if you have some other way of hiding column and you know the index of the column simply use the following -
$('.tablesorter-filter-row td:eq(' + index + ')').hide();

[Mottie]

Hi @avoorhees!

Actually, I have a new column selector widget (see issue #318) that uses css nth-child selectors instead of jQuery; but I haven't "officially" bumped the next version, but you can get the files by downloading the current repository zip file or copying them directly from here: example-widget-column-selector.html demo file & widget-columnSelector.js.

[avoorhees]

Mottie himself! What a honor!

I'm a little confused on how to use it. I don't want the column to be able to reappear rather just stay hidden but still sort based on its contents.

Here is the code for the table that I have: (The 11th column still appears). I included widget-columnSelector.js

 $("#primaryTable").tablesorter({
    // sort on the first column and third column in ascending order
    sortList: [0, 0],
    cssAsc: "headerSortUp",
    cssDesc: "headerSortDown",
    cssHeader: "header",
    widthFixed: true,
    widgets: ['filter','columnSelector'],
    widgetOptions: {
        filter_childRows: false,
        filter_columnFilters: true,
        filter_cssFilter: 'tablesorter-filter',
        filter_functions: {2: function(e, n, f, i, $r) {
                var parts = e.replace(/\s/g, '');
                var newParts = parts.split(",");
                if (f == newParts[0] || f == $.trim(newParts[1])) {
                    return true;
                } else {
                    return false;
                }
            }
        },
        filter_hideFilters: false,
        filter_ignoreCase: true,
        filter_reset: 'button.reset',
        filter_searchDelay: 300,
        filter_startsWith: false,
        filter_useParsedData: false,
        columnSelector_columns : {
                            11: false 
                    }
        }
})

[Mottie]

Hmm, ok... maybe you don't need that widget if the column is going to stay hidden. Try this instead (demo):

HTML

<button class="sort">Sort Hidden Column</button>
<button class="reset">Reset Filters</button>
<br>
<!-- use zero-based index of column in data-column -->
<input class="find" data-column="2" placeholder="Find in hidden column" type="search">
<br>
<table class="tablesorter">
...
</table>

CSS

/* which every column (one-based index) */
table th:nth-child(3),
table td:nth-child(3) {
    display: none;
}

Script

$(function () {
    var $table = $('table').tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'filter'],
        widgetOptions: {
            filter_reset : '.reset'
        }
    });
    $('.sort').on('click', function(){
        $table.trigger('sorton', [ [[2,0]] ]);
    });
    $.tablesorter.filter.bindSearch( $table, $('.find') );
});

And I'm glad you feel honored, but I'm nobody famous ;P

[avoorhees]

Worked like a charm. Much appreciated. Keep up the awesome work!

[pmolaro]

Mottie, I'm trying to use the columnSelector widget to hide 2 columns in my table. I'm running the latest version (just updated everything). hey are extra data columns I just don't need to show. I an including the widget's js, added it to the widgets list in the config, and in my widgetOptions I have added

columnSelector_columns : {
    9 : false,  
    10 : false
  }

My columns still appear. Did I miss a step. Is there a better way to do this. I assume hiding columns is a basic feature, so I must just be missing something.

[Mottie]

Hi @pmolaro!

I can only guess at the problem, but are the column indexes 9 and 10 in the first row of the table?

The columnSelector_columns option expects the column to be an actual column index and not the header index (th count). So for example, given this thead:

<thead>
    <tr>
        <th>Student</th>
        <th colspan="2">Info</th>
        <th colspan="4">Courses</th>
    </tr>
    <tr>
        <th>Name</th>
        <th>Major</th>
        <th>Sex</th>
        <th>English</th>
        <th>Japanese</th>
        <th>Calculus</th>
        <th>Geometry</th>
    </tr>
</thead>

and you want to hide the "Calculus" and "Geometry" columns, set the columns option as follows:

columnSelector_columns : {
    5 : false,
    6 : false
}

[yudicrownit]

Hello i am using tablesorter with few more functionalities.

I am using jquery ui sorting to sort the rows and updating the serial number on sorting now the issue came to me is when i click on some button i want to hide specific rows from tablesorter but if i do this with css display none it broke when i change the page all the rows are visible now also if i use css display none the rows on first pager should be 10 but after hiding 2 rows there are only 8 rows on 1st pager.

Could you please help me how to hide the rows permanently and work on other rows i can give a hidden class to them

[Mottie]

Hi @yudicrownit!

That is interesting. So you want to keep the column sort and still be able to manually sort rows?

When hiding the selected rows, add a class name of "filtered" instead of setting the css display. The pager looks for that class name instead of using jQuery's much slower :visible method when determining which rows to include in a page.

[yudicrownit]

Thanks for your reply @Mottie

Well i did it...what i did is i just removed the inactive rows from the actual position to append to the last position in table with display:none!important and when use disable the toggle button inactive comes back to actual position...and for that bug where it was showing only 8 rows i am destroying the tablesorter and calling it again..now its working just perfect!

[pauldube]

Hi Mottie,

I implemented the solution you gave to avoorhees. However my implementation is using a checkbox to display rows when the value 1 is in the hidden column or show all if empty. So the checkbox sets the value 1 in the hidden field and triggers the search (or clear the value in the hidden field and triggers the search). This works fine except that the search fields become visible on all fields. Is it possible to keep them hidden unless there is a search term entered as would be expected?

[Mottie]

Hi @pauldube!

If you don't want to add a filter row, set the filter_columnFilters option to false. Or am misunderstanding the question?

[pauldube]

I like the filter row to hide when not necessary. Take a look at this demo. I want the filter row to disappear normally when checkbox is checked (if there is no text entered in any visible filters of course).

[Mottie]

Ah ok, I'll see what I can come up with to accomplish that request.

[Mottie]

Ok @pauldube! I've updated the filter_hideFilters setting to now accept a function. It's currently only available in the master branch. I've also updated the documentation, but you won't be able to see it until the next release; which should be soon.

You can use it as follows (demo)

filter_hideFilters: function(config) {
  // get an array of filter queries
  var search = $.tablesorter.getFilters(config.$table);
  // ignore any query is column 2 (zero-based index)
  search.splice(2, 1);
  // return true to hide the filter row, false to show it
  return search.join("") === "";
}

The demo is using the widget-filter.js from the master branch. It is also loading widget-storage.js separately as the jquery.tablesorter.widgets.js file won't get updated until the next release.

[pauldube]

Ohhh! It works great. You're the best!