Question

I have found this example in stackoverflow. This is very helpful.

http://jsfiddle.net/Mottie/Yke6M/

Right now it allows two ways to sort table contents:

1) sort by clicking on each table header
2) sort the table by selecting a option drop down.

My requirement is only sort with drop down menu.
I want to remove the feature of sorting by clicking on table header.

can i disable clicking on header?

I am guessing that I can add some css to table header which makes it unclickable. But I dont know if there is something like that in css.

Thanks

Answer 1

All you need to do is set the sorter to false for each column:

$('table').tablesorter({
    headers : {
        0 : { sorter: false },
        1 : { sorter: false },
        2 : { sorter: false },
        3 : { sorter: false }
    }
});

This disables the manual sorting, but you can still trigger a sort, so the external dropdown will still work (demo).

Or if you are using my fork of tablesorter on github, you can just add the class name sorter-false to the headers (demo):

<th class="sorter-false">Alphabetic</th>
<th class="sorter-false">Numeric</th>
<th class="sorter-false">Animals</th>
<th class="sorter-false">Sites</th>