Question

I’m running into difficulty when using the TableSorter jQuery plugin, if I have a cell value with a date at the end.

I want to sort strictly by my text, but I think the plugin must be getting confused with the text because of the date. When I click the column header, the class does switch back and forth between headerSortUp and headerSortDown, but the rows don’t get sorted.

Here’s an example:

<table id="tbl1">
    <thead>
        <tr>
            <th><a href="#" onclick="return false;">Col1</a></th>
            <th><a href="#" onclick="return false;">Col2</a></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ZXY 123 10/31/2011</td>
            <td>2</td>
        </tr>
        <tr>
            <td>ABC 345 09/30/2011</td>
            <td>4</td>
        </tr>
        <tr>
            <td>DEF 345 08/31/2011</td>
            <td>6</td>
        </tr>
    </tbody>
</table>

If I remove the date at the end, or remove the number in the middle, or make the data less consistent it sorts fine. I’ve tried adding class="{sorter: 'text'} to the <th> element, with no effect, and I’ve also tried my own parser that just looks at the text itself, but still nothing.

I’ve got it up on JSFiddle at http://jsfiddle.net/y2z8z/

Any thoughts?

Answer 1

You cannot set the header config in the class attribute, it should be set in the headers config. Try this

jQuery(document).ready(function() {
    jQuery("#tbl1").tablesorter({headers:{ 0: {sorter: 'text'} } });
});

Wordking demo