Question

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

我想按第一列排序，这是一个超链接，所以排序应该在超链接的文本上进行，也应该在第二列上进行，这是一个基于下面给出的状态权重的状态图标：

<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>

现在我想分别排序服务名称和状态的第一列和第二列。由于第一列包含链接和第二个图像，我想对它们进行排序..

我正在使用的代码在下面似乎不起作用..

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

任何帮助将受到高度赞赏.. 注意：我想按状态对状态进行排序，例如状态及其权重如下：

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

Answer 1

看起来你需要使用专门的解析器和textExtraction的组合。查看使用以下代码的this demo：

// 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

我知道这可能有点快速和肮脏，但我有一个生成的页面服务器端。检查例如 （如果字段（'reg'）= 1，则显示ok.png，如果不显示not_ok.png）

所以我按照图像编写数字，然后按数字排序。我使用一种风格来使数字1px，因此它不显示。

的CSS： .mini {大小：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>

排序是好的，我没有必须摆弄JS。您可以使用任何数字进行排序。

使用JQuery Sorter插件对表中的图像和超链接列进行排序

2 个答案: