1

I've been working with Tablesorter the last few days but couldn't find anything to help with parser for heights (5'11", 6'2", etc.) or fractions (10 3/4, 10 5/8, etc.) The page I'm working on is here: http://tinyurl.com/89ewthl

For most of the columns it sorts fine, but I am running into issues with the "Broad Jump," "Arm" and "Hand" columns. The script doesn't recognize that 10'11" is bigger/longer than 10'4"; rather, it groups it right above 10'1", which makes sense. I saw one post that suggested to input the results in inches (for example, 10'11" = 131, 10'1" = 121, 10'4" = 124) and use a parser to convert it into X'Y" format, but I couldn't get it to work.

As for the fractions, I'm using, in ascending order, 1/8 through 7/8: 

⅛ ¼ ⅜ ½ ⅝ ¾ and ⅞

Tablesorter doesn't recognize these bits of HTML so the end result is scrambled based on the preceding whole number.

I'm not very good with Javascript so writing the parsers would be problematic for me. I'd be very grateful for any help that is provided!

Craig
  • 13
  • 3
  • You did it backwards. Use the format() function of a parser to convert from X'Y" format to inches. The format function should return a number. Also set the type to numeric [(see example)](http://tablesorter.com/docs/example-parsers.html). – Vik David Feb 27 '12 at 14:25

2 Answers2

1

I just ran across this while looking for something else, but I thought I'd add my own solution to the height sorting problem in case anyone needs it.

http://lithostech.com/2008/08/adding-a-jquery-table-sorter-parser/

I used this to sort heights of high school football players for http://blitz.fresnobeehive.com

Stephen Crosby
  • 1,157
  • 7
  • 19
1

Whew, that took some work! But basically you just need a parser to turn all of the table cell contents into an actual value.

I made a demo here... it seems pretty solid, but you need to make sure that the table cell doesn't include any extraneous characters other than the fractions you shared above or a decimal . or forward slash /.

Here is the tested HTML

<table class="tablesorter">
  <thead>
    <tr>
      <th>Distance</th>
    </tr>
  </thead>
  <tbody>

    <tr><td>3'</td></tr>
    <tr><td>11"</td></tr>
    <tr><td>5'</td></tr>
    <tr><td>3"</td></tr>
    <tr><td>&frac12;"</td></tr>

    <tr><td>5' 11"</td></tr>
    <tr><td>10' 11"</td></tr>
    <tr><td>10' 1"</td></tr>
    <tr><td>10' 4"</td></tr>
    <tr><td>5' 9"</td></tr>

    <tr><td>5' 3/4"</td></tr>
    <tr><td>5' 5/8"</td></tr>
    <tr><td>5' 3 1/2"</td></tr>

    <tr><td>10' 3&#8539;"</td></tr>

    <tr><td>10' 2&#8540;"</td></tr>
    <tr><td>10' 3&#8541;"</td></tr>
    <tr><td>10' 2&#8542;"</td></tr>
    <tr><td>5' 3&frac14;"</td></tr>
    <tr><td>5    '   2   &frac12;        "</td></tr>
    <tr><td>10' 2&frac34;"</td></tr>

    <tr><td>5' 2 &frac12;"</td></tr>
    <tr><td>5' 2.5"</td></tr>

    <tr><td>5' 2 1/2"</td></tr>

    <tr><td> 10  ' 1   "</td></tr>

  </tbody>
</table>

and the parser and tablesorter initialization code:

$(function(){

    $.tablesorter.addParser({
        // set a unique id
        id: 'distance',
        is: function(s) {
            // return false so this parser is not auto detected
            return false;
        },
        format: function(s) {
            var d, f, i = 0, t, p = 0;
            // look for feet symbol = '
            d = (/^(\s+)?\d+(\s+)?\'/.test(s)) ? s.split("'") : [0,s];
            // *** feet ***
            f = d[0];

            // *** inches ***
            if (typeof(d[1]) !== 'undefined') {
                // trim outside spaces and remove the inches symbol = "
                i = $.trim(d[1].replace(/\"/,''));

                // look for a space in the first part of the inches: "10 3/4" and save the "10"
                if (/\s/.test(i)) {
                    p = parseFloat(i.split(' ')[0]);
                    // remove stuff to the left of the space
                    i = $.trim(i.substring(i.indexOf(' '), i.length));
                }

                // look for a "/" to calculate fractions
                if (/\//.test(i)) {
                    t = i.split('/');
                    // turn 3/4 into .75; make sure we don't divide by zero
                    i = p + parseInt(t[0], 10) / parseInt(t[1] || 1, 10);
                // look for non-words (anything but the below symbols will be replaced with "undefined")
                } else if (/\W/.test(i)) {
                    i = p + i.replace(/\W/g, function(m){
                        return {
                            '.' : '.',    // leave decimal, just in case
                            '⅛' : '.125', // 1/8
                            '⅜' : '.375', // 3/8
                            '⅝' : '.625', // 5/8
                            '⅞' : '.875', // 7/8
                            '¼' : '.25',  // 1/4
                            '½' : '.5',   // 1/2
                            '¾' : '.75'   // 3/4
                        }[m];
                    });
                }
            }
            // format your data for normalization
            return parseFloat(f) + (parseFloat(i)/12 || 0);
        },
        // set type, either numeric or text
        type: 'numeric'
    });

    $('table').tablesorter({
        headers : { 0: { sorter: 'distance' }},
        widgets: ['zebra']
    });
});​
Mottie
  • 84,355
  • 30
  • 126
  • 241
  • Opps, [here is a demo](http://jsfiddle.net/Mottie/9sKwJ/15/) using your data table. Please that the demo is using my fork of the [tablesorter](http://mottie.github.com/tablesorter/docs/) plugin, so the empty spaces sort at the bottom instead of the top. – Mottie Feb 29 '12 at 20:12
  • Hi, thanks so much for your lengthy response and for taking the time to help! Do you have a suggestion on what editor to use -- I'm using Notepad++, and the code fixed the problem with the broad jump but it's having trouble with the fractions because it's not recognizing the 1/8, 3/8, 5/8 and 7/8 and is turning them in to "?" -- see image: http://i44.tinypic.com/5anhxw.jpg – Craig Mar 01 '12 at 22:46
  • Try out [Sublime Text 2](http://www.sublimetext.com/2), it's all kinds of awesome! Also, I don't use Notepad++ but there should be a way to convert the file to UTF-8. – Mottie Mar 02 '12 at 14:04
  • Check out this answer: http://stackoverflow.com/questions/7256049/notepad-convert-ansi-to-utf-8-problem – Mottie Mar 02 '12 at 14:07
  • Yes, perfect, it's working! Have to say, I've ran across this site frequently while looking for solutions to problems but this is the first time I've actually posted a question. You've been SO helpful and I can't thank you enough. Very impressed with your knowledge and timeliness of your responses, and for doing all that work writing the code. I really appreciate all your help. – Craig Mar 02 '12 at 22:40