FAQ

Wiki: Home | FAQ | Snippets | Search | Language | Change Log | Change Log (Pager) | Change Log (Filter) | Change summary #List of FAQ

• Why does my column only sort once?
• Why doesn't the zebra widget work in tabs, popups or dialog boxes?

##Why does my column only sort once?

There are various reasons why this could happen, but the most often it is due to an incorrect parser being set.

When a table has tablesorter applied to it, it must determine what type of data each column contains. The code that does this isn't really that smart, because all it does is looks at the first cell in that column - it is smart enough to skip empty cells and go to the next row - and then runs through each parser until something matches.

So say you have text included after a date, something like "Aug 21, 2009 12:21 PM blah", the date parser won't think this is a date because of the extra text. So it will set the parser as just plain text. See this demo. To fix this, wrap the date text in a span

<td><span>Aug 21, 2009 12:21 PM</span> blah</td>

then target the date using the textExtraction option, like this (working demo)

textExtraction: {
    1: function (node) {
        return $(node).find('span').text();
    }
}

Alternatively you can wrap the extra text in a span

<td>Aug 21, 2009 12:21 PM <span>blah</span></td>

Then modify the text extraction function like this (demo):

textExtraction: {
    1: function (node) {
        return node.childNodes[0].nodeType === 3 ? node.childNodes[0].nodeValue : $(node).text();
    }
}

Or, write your own custom parser (demo):

$.tablesorter.addParser({
    id: "dates",
    is: function (s) { return false; }, // don't auto detect this parser
    format: function (s, table) {
        // match dates in this format: "Mmm dd, yyyy hh:mm:ss AM"
        var date = s.match(/^[A-Z]{3,10}\.?\s+\d{1,2},?\s+(?:\d{4})(?:\s+\d{1,2}:\d{2}(?::\d{2})?(?:\s+[AP]M)?)?/i)[0];
        return date ? $.tablesorter.formatFloat((new Date(date).getTime() || ''), table) || s : s;
    },
    type: "numeric"
});

$('table').tablesorter({
    headers : {
        1 : { sorter : 'dates' }
    }
});

If your issue doesn't seem related to this, then please check the development console (Press F12 in the browser, while on the problematic page), then

##Why doesn't the zebra widget work in tabs, popups or dialog boxes?

The zebra widget only alternates class names on every visible row. So when tablesorter is inside of a tab, popup or dialog that isn't visible when the zebra widget is applied (tablesorter initialization), the table and all of its rows are hidden. So that means the zebra widget find any visible rows and ends up not adding any class names.

The easiest solution would be to use the tab, popup or dialog callback which is executed when it becomes visible. Since there are so many, I'm only going to show an example using jQuery UI widgets. For tabs, do the following:

$("#tabs").on("tabsactivate", function(event, ui){
	// make sure zebra widget is applied
	// after the tab becomes active
	ui.newPanel.find('table').trigger('applyWidgets');
});

and for the jQuery UI Dialog, do this:

$('#dialog')
	// initialize dialog widget
	.dialog()
	// use open callback to update the zebra widget
	.on("dialogopen", function(event, ui){
		// make sure zebra widget is applied after
		// the dialog is visible
		$(this).find('table').trigger('applyWidgets');
	});