[解決済み] dataTables のカラムをカスタム sortId でソートする

質問

を使っています。 jQuery データテーブル 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>

Webで検索してみましたが、どうやらこの機能は データテーブル . どうすれば実現できるのでしょうか？

を使用することに注意してください。 sortId の属性である必要はありません。 <td> 文字数がそれほど多くない限りは、他の隠された解決策でもかまいません。

その データソート 属性は、まさに私が探していたものです。

この属性を追加する実験を少ししてみたが、うまくいかなかった（両方とも data-sort と data-order ).

• この機能を実現するために、テーブルのどこかをいじる必要がありますか？

• 2012 バージョンの datatable (v1.9.4) を使用していますが、この機能はこのバージョンですでに実装されていますか？ ファイル内のテキスト検索 jquery.dataTable.js には全くマッチしません。 data-order と data-sort の文字列があります。

解決方法は？

jQuery DataTables 1.10以上

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

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

参照 この例 をクリックすると、デモをご覧いただけます。

または columns.render オプションがありますが、これはAjaxやJavaScriptで作成されたデータにより適しています。

jQuery DataTables 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;
        }
    }]
});

参照 このjsFiddle のコードとデモをご覧ください。

jQuery DataTables 1.9の代替案として、hidden要素を使用し、そこにソート値を指定することができます。値は文字列として比較されるので、必要であれば数値にゼロパディングを追加してください。

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

参照 このjsFiddle のコードとデモをご覧ください。