Sort images and hyperlink columns in a table using the jQuery Sorter plugin

Question

I have a table with three columns, the first column contains the name of the service, which is a hyperlink, the second column contains a status icon, and the last column again is the image for the log file, which is again a hyperlink.

I want to sort by the first column, which is a hyperlink, so sorting should be done by the text of the hyperlink, as well as by the second column, which is a status icon based on the balance of state below:

<table border="0" cellspacing="0" cellpadding="3" class="services" width=100%> <thead> <tr> <th align="left">Service Name</th> <th align="left">Status</th> <th align="left">Log</th> </thead> <tbody> <tr> <td><a href="">Service 1</a></td> <td><img srd="running.png" /></td> <td><a href=""><img src="log.png" />Log1</a></td> </tr> <tr> <td><a href="">Service 2</a></td> <td><img srd="error.png" /></td> <td><a href=""><img src="log.png" />Log</a></td> </tr> <tr> <td><a href="">Service 3</a></td> <td><img srd="stopped.png" /></td> <td><a href=""><img src="log.png" />Log</a></td> </tr> </tbody> </table> 

Now I want to sort the first and second columns, which are the service name and status, respectively. Since the first column contains the link and the second image, I want to sort them.

The code I'm using is below, which doesn't seem to work.

 jQuery(document).ready(function() { jQuery(".services").tablesorter({ // pass the headers argument and assing a object headers: { // assign the third column (we start counting zero) 2: { sorter: false } }, textExtraction: extractValue }); function extractValue(node){ var cell = node.childNodes[0]; console.log(cell.innerHTML); return cell.innerHTML; } }); 

Any help would be greatly appreciated. NOTE. I want to sort the status by their states, for example, the status with their weight below:

 running =>1 stopped =>2 error =>3 

Answer 1

It looks like you will need to use a combination of a specialized analyzer and textExtraction. Check out this demo that uses the following code:

 // add parser through the tablesorter addParser method // running =>1 stopped =>2 error =>3 $.tablesorter.addParser({ // set a unique id id: 'status', is: function(s) { // return false so this parser is not auto detected return false; }, format: function(s) { // format your data for normalization return s.toLowerCase() .replace(/running.png/, 1) .replace(/stopped.png/, 2) .replace(/error.png/, 3); }, // set type, either numeric or text type: 'numeric' }); $('table').tablesorter({ headers: { 1: { sorter: 'status' } }, textExtraction: function(node) { var $n = $(node).children(); return ($n[0].nodeName === "IMG") ? $n.attr('src') : $n.text(); } });​ 

Answer 2

I know this can be a little quick and dirty, but I have a generated page server. Verification, for example. (if field ('reg') = 1, then display ok.png, if not display not_ok.png)

So, I write the number by image and sorted by number. I use style to make the number 1px so that it does not display.

CSS: .Mini {size: 1px} `

HTML:

 <td><img src="img/ok.png" alt="ok" /><span class="mini">1</span></td> <td><img src="img/not_ok.png" alt="ok" /><span class="mini">0</span></td> 

Sorting is fine and I didn't have to mess with JS. You can use any number for sorting.