1

我有一个包含 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
4

2 回答 2

2

看起来您需要结合使用专门的解析器和 textExtraction。查看这个使用以下代码的演示：

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


});​
于 2012-10-26T02:06:41.357 回答
0

我知道这可能有点快和肮脏，但我有一个生成的页面服务器端。检查例如 （如果 field('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。您可以使用任何数字进行排序。

于 2014-08-27T13:06:36.383 回答