Sorting Image and hyperlink columns in a table using JQuery Sorter plugin

Question

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

I want to sort by first column which is a hyperlink, so the sorting should be done on the text of the hyperlink and also on second column which is an status icon based on the status weightage given 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 column which is service name and status respectively.. Since the first column contains the link and second image, I want to sort them..

The code I am using is below which doesn't seems to be working..

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 will be highly appreciated.. NOTE: I want to sort the status by their states such as the status with their weightage is below:

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

Answer 1

It looks like you'll need to use a combination of a specialized parser and textExtraction. Check out this demo which 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 is maybe a bit quick and dirty but I have a generated page serverside. Checking e.g. (if field('reg') = 1, then display ok.png, if not display not_ok.png)

So I write the number by the image and it sorts by the number. I use a style to make the number 1px so it does not show.

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 ok and I did not have to fiddle with the JS. You could use any number to sort by.