使用JQuery Sorter插件对表中的图像和超链接列进行排序 [英] Sorting Image and hyperlink columns in a table using JQuery Sorter plugin

问题描述

我有一个包含3列的表，第一列包含服务名称，它是一个超链接，第二列包含状态图标，最后一列是一个用于日志文件的图像，它又是一个超链接..

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

推荐答案

您似乎需要结合使用专门的解析器和textExtraction.查看此演示，该演示使用以下代码:

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();    
    }


});​

这篇关于使用JQuery Sorter插件对表中的图像和超链接列进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！