[jQuery] Custom sort on table cell attribute value in tablesorter plugin rather than innerHTML value: help please!

[jQuery] Custom sort on table cell attribute value in tablesorter plugin rather than innerHTML value: help please!


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!