2016-04-06 20 views
1

tablesorter-pluginを使用して、最後のセルが複数の列にまたがる行からなるテーブルをソートしようとしています。tablesorter td-colspan in tbody

スパニング列には、複数のセルと非表示の行を保持する内部テーブルがあります。テーブルヘッダー1の列1への応答をソートするとき、列2とテーブルヘッダー3へのテーブルヘッダー2の応答はスパニング列に応答し、textExtractionはスパニング列をソートします。しかし、より多くの表ヘッダーがあり、次の列ではなく内部表でソートする必要があります。

私はここで少し例作りました。それを簡単にするためhttp://jsfiddle.net/frankmyhre/aoLgu7f9/

$('table').tablesorter({ 
    textExtraction: { 
     1: function(node){ return $(node).find('.cell1').eq(0).text(); }, 
     2: function(node){ return $(node).find('.cell2').eq(0).text(); } 
    } 
}); 

を、これは私が(フィドルから)取得しようとしているものです:

「名前」 -headerはname-column(列0)をソートします
"Phone" -headerは、cell1-classの最初の発生の値を調べてスパニング列(列1)を並べ替えます
"Type"ヘッダーの並べ替えスパニング・カラム(カラム1)b yは

+0

現在、 'tbody'で' colspan'が見つかった場合、tablesorterは[duplicateSpan'設定](http://mottie.github.io/tablesorter/docs/#duplicatespan)を使用して、そのセルのいずれかを設定しますスパンされたすべてのセルで同じ値、または空の文字列。代わりに 'textExtraction'関数を呼び出すように関数を更新する必要があります。 – Mottie

答えて

0

duplicateSpanオプションがfalseに設定されている空の文字列のセル値を設定するのではなく、設定されている場合tablesorterのフォークtextExtraction機能を使用する更新されている(CELL2クラスの最初の出現の値を見てdocs) - この変更は現在、リポジトリのマスターブランチでのみ使用可能であり、バージョン2.25.8でリリースされるように設定されています。この方法は、最初のセル1またはセル2からデータを取得しtextExtraction機能を使用するため、「ホーム」を持つ細胞は、以下のとおりです。

$('table').tablesorter({ 
    debug: true, 
    duplicateSpan: false, 
    textExtraction: function(node, table, cellIndex) { 
    if (cellIndex > 0) { 
     // this works because cell1 and cell2 match the table 
     // column zero-based index 
     return $(node).find('.cell' + cellIndex).eq(0).text(); 
    } 
    return node.textContent; 
    } 
}); 

注:

だから、あなたは(this fileを使用して、demoを)これを行うことができます「クラブ」と「オフィス」のコンテンツは無視されます。

$('table').tablesorter({ 
    duplicateSpan: false, 
    textExtraction: function(node, table, cellIndex) { 
    if (cellIndex > 0) { 
     // this works because cell1 and cell2 match the table 
     // column zero-based index 
     var txt = ''; 
     $(node).find('.cell' + cellIndex).each(function(){ 
     txt += this.textContent + ' '; 
     }); 
     return txt; 
    } 
    return node.textContent; 
    } 
}); 

注2:あなたは次のように(demo)関数を変更することを含めたい場合はdebugオプションを使用すると、コンソールを見て、この2つの機能の違いを見ることができるように、デモでtrueです。

+0

お返事ありがとうございました。私はテーブルに追加された列を追加しようとしましたが(ネストされたものではありません)、インデックスを0から1に変更しても機能すると思っていましたが、最初の(ID)と3番目(列) /jsfiddle.net/frankmyhre/aoLgu7f9/。デバッグで、ID列を追加すると、型の列が存在しないことがわかります。 – frankmyhre

+0

"cell1"と "cell2"のクラス名は、それぞれの列に一致する必要がありますので、これらのクラスをそれぞれ "cell2"と "cell3"に変更してください - [demo](http://jsfiddle.net/Mottie/aoLgu7f9/ 23 /)。 – Mottie

+0

ファンタスティック・モーティー、ありがとう。 tablesorter-pluginのために作った素晴らしい例に感謝します – frankmyhre