1

3 列のテーブルがあり、最初の列にはハイパーリンクであるサービス名が含まれ、2 番目の列にはステータス アイコンが含まれ、最後の列には再びハイパーリンクであるログ ファイルの画像が含まれます。

ハイパーリンクである最初の列で並べ替えたいので、ハイパーリンクのテキストと、以下に示すステータスの重みに基づくステータス アイコンである 2 番目の列で並べ替えを行う必要があります。

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

ここで、それぞれサービス名とステータスである1列目と2列目を並べ替えたい.最初の列にはリンクと2番目の画像が含まれているので、それらを並べ替えたい..

私が使用しているコードは以下のとおりで、動作していないようです..

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 に答える