Mixed content in header cells

[sassquad]

Hi there,

I've attempted to implement tablesorter on a table which contains graph buttons as well as column headers, like in this fragment (generated using php with various variables populating the javascript code):

<tr class="tablesorter-header">
    <th class="rc tablesorter-header" data-column="0">
    <div class="tablesorter-header-inner">
        <a class="sortheader" href="#">Date<span class="sortarrow" sortdir=" "> </span></a>
        <br>
        <img onclick="ts_bldNewGrph('','sbmed_20120926103907',7); return false;" src="images/grph.gif" class="hdr_icon">
    </div>
    </th>
</tr>

I need to prevent the table from sorting when you click the image link (with classname hdr_icon). I've tried using return false, and jQuery's event.stopPropagation() to stop the click from activating the sort, but to no avail.

I would also prefer the text of 'Date' to fire the sort, rather than the header cell itself.

I'm working with a system that generates much inline Javascript, so the onclick is required for the time being. Is there any way of configuring this plugin to allow for such cases? Having trawled the net, I've not been successful in finding a similar case study.

Thanks in anticipation - it's otherwise a great plugin, easy to implement.

[Mottie]

Hi sassquad!

Hmm, yeah there isn't an easy way for you to tell the plugin what to click on... I'll work on something in the version 2.4 release. What I think I'll do is add a new selector to indicate what in the header is clicked to trigger a sort.

At first I was thinking about changing the way the selectorHeaders option worked, but maybe just a new option would be better.

[sassquad]

Thanks for replying Mottie. Would be great to see this asap, but can await with baited breath.

I do have another issue, but it may be hard to explain without an example being drawn up. I'll raise it as another issue, to keep things clean.