カスタムソートIDを使用してdataTables列をソート

Question

私はjQuery DataTables 1.9.4を使用してデータを表示しています。セルに表示する新しいカスタムタイプがあり、表示フォーマットが表現された値と簡単には関連しないため、各タイプのカスタムソート機能を追加するのは非常に面倒でメンテナンスが難しいでしょう。例えば、表示形式は3 oranges, 4 applesであり、ソートの値は7となります。私は考えることができる

最善の解決策は、整数となり、各セルにsortId属性を提供することにある、と列のセルは、このsortIdによってソートされます。

before 
<td>3 oranges, 4 apples</td> 

after 
<td sortId="7">3 oranges, 4 apples</td> 

私は、ウェブ上で検索し、のDataTableの特徴ではないようです。どのように私はそれを達成できましたか？

<td>の属性である必要はなく、それほど多くの文字が必要でない限り、他の隠された解決策があれば問題ありません。

---

data-sort属性が、私は感謝を探していたものを間違いです！

この属性には運がないビット（data-sortとdata-orderの両方）を追加してみました。

• テーブルの内容を調整する必要がありますか？

• 2012バージョンのdatatable（v1.9.4）を使用しましたが、このバージョンでは既にこの機能が実装されていましたか？ファイルjquery.dataTable.jsのテキスト検索では、data-orderとdata-sort文字列の一致がゼロになります。

Answer 1

のjQueryのDataTable 1.10+

あなたはtd要素の属性を使用したい場合は、HTMLソースのデータをソートするために使用される値を定義しdata-sort属性があります。

<td data-sort="7">3 oranges, 4 apples</td> 

詳細とデモについては、this exampleを参照してください。

また、columns.renderオプションを使用することもできますが、これはAjaxまたはJavaScriptソースのデータに適しています。

のjQueryのDataTable 1.9

使用aoColumnDefs.mRender以下に示すように、データがソートされているときにセルのコンテンツを生成する：

var table = $('#example').dataTable({ 
    "aoColumnDefs": [{ 
     "aTargets": [0], 
     "mRender": function(data, type, full) { 
      if (type === "sort") { 
       var numbers = data.match(/\d+/g); 

       data = 0; 
       for (var i = 0; i < numbers.length; i++) { 
        data += Number(numbers[i]); 
       } 
      } 
      return data; 
     } 
    }] 
}); 

コードとデモ用this jsFiddleを参照してください。

jQuery DataTables 1.9の代替ソリューションは、隠し要素を使用してソート値を指定することです。値は文字列として比較されるので、必要に応じて数値にゼロパディングを追加してください。

<tr> 
    <td><span style="display:none">0007</span> 1 apple, 6 oranges</td> 
</tr> 
<tr> 
    <td><span style="display:none">0005</span> 3 apples, 2 oranges</td> 
</tr> 
<tr> 
    <td><span style="display:none">0006</span> 5 apples, 1 orange</td> 
</tr> 

コードとデモンストレーションについては、this jsFiddleを参照してください。