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