Jquery tablesorter - Hyphen bug

Question

I made a very basic example, and when I use a hyphen on the first <tr> <td> (first row, first cell), tablesorter no longer works.
I'm using jquery 1.7.1, and latest tablesorter.min.js

Code examples:

Works -> No hyphen: http://jsfiddle.net/6gjLs/4/
Works -> Hyphen on second row: http://jsfiddle.net/8Wet2/4/
Not working -> Hyphen on first td on first row: http://jsfiddle.net/YkaCv/4/

The code as you can see is exactly the same on the 3 examples, only the table data changes.

Anyone experienced the same problem? Any workaround?

Answer 1

Actually when tablesorter tries to determine what kind of data is contained in each column, it gets confused with the dash... is it text or a minus sign? If you run the plugin with debug set to true you'll see it sets the parser to digit. Here is an updated demo.

So the best non-hacky solution would be to set the header parser to text:

$(".tableresult").tablesorter({
    headers: {
        0: { sorter:'text' }
    }
});

And lastly, please don't use $().ready(function(){}); as the document ready function. In the latest versions of jQuery, it is still supported, but it is not recommended to use and support will most likely be removed in the future. Use $(function(){}) instead.

Answer 2

Hey So here is the reason why it doesn't work & hack-y solution.

Reason:

So it table sorter code does take care of dash - .

https://github.com/jbritten/jquery-tablesorter-filter/commit/378b7ef36e9201df4ec6bd3fb2487e8c9ec9359f

but I am reading the plugin and should fin out why this hidden first row resolves it

Possible solution:

a) It checks for at least one character to start parsing that hyphen/dash (-) If you know any HTML encoding which can fake a character which will not appear. AND I tried it with underscore (_) it works as well. I will keep playing but

b) *If* you can try putting this as a first row that will be awesome - do an empty row at the top with some content and then second row as dash

Working CODE: (In your JSFiddle - change your TBODY to this one and this should work man.

       <tbody>
 <tr style="display:none;">
                    <td>foobar</td>                                                                                          
                </tr>                
                <tr>
                    <td>-</td>                                                                                          
                </tr>
                <tr>
                    <td>B</td>                                               
                </tr>
                <tr>
                    <td>C</td>                                               
                </tr>
            </tbody>

I hope this helps so far.

Cheers,

Answer 3

I'm not so into tablesorter however one easy workaround that I found that works in your example is just to always insert a hidden tr,td and put in A in the top:

            <tr style="display:none">
                <td>A</td>                                                                                          
            </tr>