sort by cell title attribute?

petemaceli

I'm truncating data passed to the table on the server side using a recursive function, but doing so mucks up my sorting. I can pass the full data to each table cell's title attribute, but I'm not sure how to accomplish sorting using the cell's attribute instead of its data. Thanks in advance for your suggestions.

allan

Hi petemaceli,

You can't sort by the cell's title attribute, since the sorting is done on the text inside the cell and the sorting functions don't have access to the cell node (actually - this isn't 100% correct - see below). What you can do instead is use something like this "hidden title" sorting plug-in: http://datatables.net/plug-ins/sorting#hidden_title

So regarding my "not 100% correct" statement - it is actually possible to do live DOM sorting, it's just a little more tricky (and can impact on performance):

http://datatables.net/development/sorting
http://datatables.net/examples/api/dom_sort.html

Regards,
Allan

petemaceli

Thanks for the reply. I saw the hidden title plugin while looking through the docs, and in concept, it would be a great solution if something similar existed to sort plain text. Is the plugin something that can be modified easily enough? My javascript knowledge is limited, to say the least.

allan

Hi petemaceli,

I've just posted a string sorting version of the plug-in: http://datatables.net/plug-ins/sorting#hidden_title_string

Regards,
Allan

petemaceli

Awesome. I'll implement this today, thanks for the change.

petemaceli

I'm getting ready to post these latest changes live and found that the sorting function works fine in Firefox, but not in IE for some reason. The page is available here to see what I mean. If you try to sort by "department" and go to the last page, you'll notice that "Admissions," for example comes up out of order. Again, all works fine in Firefox. Drop me a line if you can help me further.

http://www.iona.edu/staff/fullDirectory2.cfm

petemaceli

bump

RickF

IE always has to be special, doesn't it?

The string that is being sorted is actually from the parsed DOM, not directly from the source. It appears that IE is removing the quotations when they aren't needed - usually when the title is a single word.

So, this:
[code]

[/code]
becomes this
[code]

[/code]

I think this modification should make it work on IE and Firefox (and Chrome)
[code]
$.fn.dataTableExt.oSort['date-asc'] = function(a,b) {
var x = a.match(/title=(.*?)>/)[1].toLowerCase().replace(/"/g,"");
var y = b.match(/title=(.*?)>/)[1].toLowerCase().replace(/"/g,"");
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
$.fn.dataTableExt.oSort['date-desc'] = function(a,b) { return $.fn.dataTableExt.oSort['date-asc'](b,a); };
[/code]

Note: I have the luxury of only having to support IE8+, so I can't be sure that this will work in older versions of IE. It also assumes that the title is always the last attribute - that seems to be the case in IE, but I didn't test extensively.

petemaceli

Thanks for the note. That code didn't end up helping, but in keeping with your theme, I came up with an ugly hack. I added a space to the beginning and end of a string in the title attribute so that

[code][/code]

is now

[code][/code]

Thanks for the input. If something more elegant is available, I'd love to implement it. For now, this is working in all my tests, on all of my target browsers.