web-dev-qa-db-ja.com

jQuerytablesorterプラグインのセカンダリ「非表示」ソート

JQuery tablesorterプラグインを使用していますが、このような月と年の名前を含む列があります

April, 1975
January, 2001

この列を日付列のように並べ替えたいと思います。私が理解しているように、他の「非表示」値で列を並べ替えることは可能ですが、その機能のドキュメントが見つからないようです。何か助けはありますか？

更新

このフォーク http://mottie.github.com/tablesorter/docs/index.html テーブルソーターには必要なものがすべて揃っていました。ソートする値を属性に格納する機能は、非常にうまく機能しました。

jquery-pluginstablesorter
22
Pelle

tablesorter のフォークがあり、テーブルセルから データ属性を抽出 できるパーサーを記述できます。また、各列に特定の textExtractionを割り当てます 。

$(function(){

  $.tablesorter.addParser({ 
    // set a unique id 
    id: 'myParser', 
    is: function(s) { 
      // return false so this parser is not auto detected 
      return false; 
    }, 
    format: function(s, table, cell, cellIndex) { 
      // get data attributes from $(cell).attr('data-something');
      // check specific column using cellIndex
      return $(cell).attr('data-something');
    }, 
    // set type, either numeric or text 
    type: 'text' 
  }); 

  $('table').tablesorter({ 
    headers : { 
      0 : { sorter: 'myParser' }
    }
  });

});
20
Mottie

TextExtraction関数を使用するだけです。 TDにdata-sort-valueを設定します。存在しない場合、デフォルトで通常のテキストになります。

$(".sort-table").tablesorter({
    textExtraction: function(node) {
        var attr = $(node).attr('data-sort-value');
        if (typeof attr !== 'undefined' && attr !== false) {
            return attr;
        }
        return $(node).text(); 
    } 
});
36
Charles

古い質問に答えてしまったことをお詫びしますが、これはtablesorterの標準機能ですが、何らかの理由で文書化されていません。ファイルを開くと https://github.com/christianbach/tablesorter/blob/master/jquery.tablesorter.js 行＃307を見ると、「data-」がサポートされていることがわかります。 sort-value "属性。

使用法：

<td data-sort-value="42">Answer to the question</td>
11
jazzcat

これは少しハックです（OK、完全なハックです）が、列のパーサーを「テキスト」に設定し、かなりの出力の前に、隠しスパン内で本当に並べ替えたい文字列をプレフィックスとして付けると、正しくソートされます。

headersオプションを使用して、列にパーサーを設定できます。例： 1列目と2列目のパーサーを「text」に設定するには、次のように設定します。

_headers: {0: {sorter: 'text'}, : {sorter: 'text'}
_

日付でこのトリックを行うには、字句的にソートするISO8601日付形式を使用できます。 JSのDateオブジェクトは、toISOString()関数を介してISO8601日付文字列を生成できます。

CSSを考えると：

_span.hidden{
    display:none;
}
_

表のサンプルセルは次のようになります。

_<td><span class="hidden">2015-04-18T23:48:33</span>19 April 2015</td>
_

世界で最も美しいコードではありませんが、機能します。

4
Bart B

私は使っている

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.0/js/jquery.tablesorter.min.js"></script>

作業中データテキスト付き

<td data-text="42">Answer to the question</td>

機能していません with data-sort-value

<td data-sort-value="42">Answer to the question</td>
3
Ravi Ram

独自のパーサーを作成する する必要があります。パーサーは次のようになります。

var months = {'January':1,'February':2, ...};
$.tablesorter.addParser({
    id: 'myDate', 
    is: function(s) { return false; }, 
    format: function(s) {
        var x = s.split(', ');
        return x[1]+'-'+months[x[2]];
    },
    type: 'numeric' 
});

テストされていませんが、一般的な考え方です。

2
Paolo Bergantino