Hi there jQuery folks,

I am using the tablesorter plugin, which I really like. However, in
several of my table cells I have oddly formatted time values that look
like the following:

1d 12h 34m 25s

Which maps to:

1 day, 12 hours, 34 mins and 25 seconds

I cannot change how these values are displayed - they have to be in
that format. However, in my code I also create an attribute to the
table cell called sorttable_customval in which I insert the raw number
format as a float:

<td sorttable_customkey="dlt"  sorttable_customval="65.093" >1m 5s</
td>

 I have tried to write my own add-on to the tablesorter source code to
get this attribute value in the confines of the tablesorter
textExtraction method:

Javascript at the top of my webpage with the table
======================================
("#monitor").tablesorter({
    textExtraction: 'customattribute',
    debug: true,
    widgets:['zebra']
})

The modified part of tablesorter.js (rows 233 and 234)
=========================================
221             function getElementText(config,node) {
222
223                 if(!node) return "";
224
225                 var t = "";
226
227                 if(config.textExtraction == "simple") {
228                     if(node.childNodes[0] &&
node.childNodes[0].hasChildNodes()) {
229                         t = node.childNodes[0].innerHTML;
230                     } else {
231                         t = node.innerHTML;
232                     }
233                 } else if(config.textExtraction ==
"customattribute") {
234                         t = $(node).attr('sorttable_customval');
235                 } else {
236                     if(typeof(config.textExtraction) ==
"function") {
237                         t = config.textExtraction(node);
238                     } else {
239                         t = $(node).text();
240                     }
241                 }
242                 return t;
243             }

I thought this would work, but I get the following error in Firebug:

s is undefined    jquery.tablesorter.js (line 703)
    return $.trim(s.toLowerCase());

The corresponding lines in jquery.tablesorter.js:

696     // add default parsers
697     ts.addParser({
698         id: "text",
699         is: function(s) {
700             return true;
701         },
702         format: function(s) {
703             return $.trim(s.toLowerCase());
704         },
705         type: "text"
706     });

So it looks like to me that my float gets treated as text and tries to
get parsed as such. I added the column number and forced a sort type
when I call tablesorter:

("#monitor").tablesorter({
    headers: {
        7:{sorter:'digit'}
    },
    textExtraction: 'customattribute',
    debug: true,
    widgets:['zebra']
});

However, this is a custom table, where a client's cookies can define
the order of the columns displayed. So defining a whole load of
headers based on column number won't work. Does anyone have any idea
how I can implement this custom attribute sort and ensure the
addParser function parses it as a digit? Or am I going about this in
totally the wrong fashion? I also tried writing my own parser:

$.tablesorter.addParser({
    id: 'dlt',
    is: function(s) {
        return s.parentNode.getAttribute('sorttable_customval') ;
    },
    type: 'numeric'
});

Then adding it to the tablesorter call:

$("#monitor").tablesorter({
    headers: { 7:{sorter:'dlt'} },
    debug: true,
    widgets:['zebra']
})

However, I got a Firebug error that parentNode is undefined. So then I
tried:

return s.attr('sorttable_customval') ;

Still failed. Then finally:

return $(s).attr('sorttable_customval') ;

which also failed.

I feel like I am pretty close to figuring it out, but I just can't
seem to get the final piece in place. All help appreciated!!

Thanks in advance!

Reply via email to