Question

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

Answer 1

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.