Sorting on images

mole1066

I have a table that uses images to display a RAG status (Red, Amber, Green) of the entry.

I have put in an alt value, and used a number for that alt value, but don't seem to be able to sort or serach correctly on that value, or indeed the full source name of the image

any clues?

allan

You would need to use a sorting plug-in in order to do this. DataTables by default will strip the HTML string a column before sorting (that can be overridden by setting the sType for the columns to 'string' - which might be good enough?). There are a number of sorting plug-ins available, and although none will exactly match what you are looking for, they will certainly show you how they work: http://datatables.net/plug-ins/sorting

Allan

Gathilas

Sorry to revive an old thread, but I had the same problem. Using the above link I modified the code to make a sort on the rel attribute of the image but it's sorting slowly (half a second) on about 850 rows. The default sorts are almost instant. I was just wondering if I did anything wrong or if it's just that there are too many rows to sort or maybe if there is a better way to do it.

Here is my code:

[code]$.fn.dataTableExt.afnSortData['dom-img'] = function ( oSettings, iColumn ) {
var aData = [];
$( 'td:eq('+iColumn+') img', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
aData.push( $(this).attr('rel') );
} );
return aData;
}[/code]

Thanks for the great work,

Gathilas

Vilhelm Persson

I hav not tested the speed but one idea might be to use a sort similar to the "Hidden title string sorting" on http://datatables.net/plug-ins/sorting
This is the code I use for sorting based on the src inside an image somewhere in the content.
If I am not wrong all you need to do is replace src with alt (or rel if this is what is wanted).

[code]$.fn.dataTableExt.oSort['image-asc'] = function(a,b)
13{
14 var imgSrcPatt=/\< *[img][^\>]*[src] *= *[\"\']{0,1}([^\"\'\ >]*)/i
15 var x = imgSrcPatt.exec(a);
16 if (x!=null && x.length>1)
17 x=x[1].toLowerCase();
18 else
19 x="";
20 var y = imgSrcPatt.exec(b);
21 if (y!=null && y.length>1)
22 y=y[1].toLowerCase();
23 else
24 y="";
25 return ((x < y) ? -1 : ((x > y) ? 1 : 0));
26}; [/code]