jQuery Table sorter: stop sorting

javascript, jquery, tablesorter

Solution

I made two demos for you. The first one has the content of the table header wrapped in a span and the second one uses the undocumented `onRenderHeader` function to add the `span` inside the header. Either way, only the contents of the `span` are clickable (the text) while clicking outside of the content will sort the column. If you use a `div` only the header padding is available to initialize a column sort.

Demo 1 - header contents wrapped in the markup

$('table')
    .tablesorter()
    .find('.inner-header')
    .click(function(){
        console.log('header text clicked');
        return false;
    });

Demo 2 - header content wrapped using the `onRenderHeader` option

$('table').tablesorter({

    // customize header HTML
    onRenderHeader: function(index) {
        $(this)
            .wrapInner('<span class="inner-header"/>')
            .find('.inner-header')
            .click(function(){
                console.log('header text clicked');
                return false;
            });
    }

});​

If you need more information on using the `onRenderHeader` option, check out my blog post on what's missing in the documents.

Problem

Is it possible to stop table sorting if user clicks on `div` inside of table header `th`? In my case div has function `onClick="resize(e)"` on which I do: ``` function resize(e) { if (!e) var e = window.event; e.stopPropagation(); .... ``` But it doesn't work. Edit: Table is sorted before `e.stopPropagation()` or `return false`

Original source