Jquery Tablesorter header

Question

Hi I am using tablesorter and would like to make a slight amendment to how it works. Currently tablesorter sorts a column whenever a user clicks on any part of the cell.

Eg.

<th>One</th>
<th>Two</th>
<th>Three</th>

I don't particularly like the default styling of the sorter, so what I have done is made some css buttons and placed them in each :

<th><a class="button">One</a></th>
<th><a class="button">Two</a></th>
<th><a class="button">Three</a></th>

What would I need to amend in the .js file so that the clickable area is the anchor and not the entire cell?

Answer 1

This ain't going to answer your questio but it's too much to be a comment.

I'm not exactly familiar with jQuery tablesorter plugin. However I would really suggest you tweak the CSS instead of introducing new elements and have to modify the plugin's code.

To do what you want, you'll need to unbind the sorting event bound to the TH elements.

$("#tableid th:has(a)").unbind();

You'll then need assign/bind the event(s) to the respective <a class=button> elements.

$("#tableid th a").bind(someEventName, someFunctionName);

The event could be a toggle/click or something else, the function could be an anonymous one so you'll have to fish it out from the plugin codes.

Even if you can do that, it might not work, depending on how the event was implemented.

Might be better off modifying the css styles for "th.header" "th.headerSortUp/Down".