2013-07-23 11 views
9

私は数字とNAの列を含むテーブルを持っています。jQueryのdataTable列のカスタムソート

<tr> 
    <td>NA</td> 
</tr> 
<tr> 
    <td>1024</td> 
</tr> 
<tr> 
    <td>100</td> 
</tr> 
<tr> 
    <td>200</td> 
</tr> 
<tr> 
    <td>300</td> 
</tr> 
<tr> 
    <td>2096</td> 
</tr> 

私は次のことを生成するために列をソートするためにjQuery dataTableを使用しようとしている:

NA、100、200、300、1024、20962096、1024、300、 200,100、NA

ですが、ソートやプラグインのドキュメントを読む方法はわかりません。

私はここにコードのフィドルを作成しました:http://jsfiddle.net/stowball/rYtxh/本当に助けに感謝します。

+1

あなたが使用している場合、「 - 」の代わりにNA」の"ここでうまくいくのはjs fiddleです。http://jsfiddle.net/stowball/rYtxh/ – Umesh

+0

@ umesh25ありがとう、本当に面白いです!私に他の解決策がない場合、私はそれをしなければならないかもしれません。 –

答えて

11

Numbers with HTMLプラグインを見ると、既存のコードを使用して正規表現を修正し、すべてを削除する代わりに負の数を探すことができます。これを使用すると、「NA」の周りにHTMLタグをまとめ、HTML5データ内部IDを使用してコレクションの最小番号を格納できます。

ので、それは次のようになります。

<td><a data-internalid="-1">NA</a></td> 

と(正規表現に注意してください)

jQuery.extend(jQuery.fn.dataTableExt.oSort, { 
"num-html-pre": function (a) { 
    var x = String(a).replace(/(?!^-)[^0-9.]/g, ""); 
    return parseFloat(x); 
}, 

"num-html-asc": function (a, b) { 
    return ((a < b) ? -1 : ((a > b) ? 1 : 0)); 
}, 

"num-html-desc": function (a, b) { 
    return ((a < b) ? 1 : ((a > b) ? -1 : 0)); 
}}); 

次にDataTableの、NUM-htmlのあなたが見ることができます

$('table').dataTable({ 
    "aoColumns": [{ "sType": "num-html" }], 
    "aaSorting": [[ 0, "desc" ]], 
}); 

にタイプを設定します私の完全な解決策はここにあります:http://jsfiddle.net/rYtxh/4/

7

<td>要素のdata-order属性を使用してください。プラグインはそれに基づいてソートされます。あなたのケースのためにHTMLは次のようになります。

<tr> 
    <td "data-order=-1">NA</td> 
</tr> 
<tr> 
    <td "data-order=1024">1024</td> 
</tr> 
<tr> 
    <td "data-order=100">100</td> 
</tr> 
<tr> 
    <td "data-order=200">200</td> 
</tr> 
<tr> 
    <td "data-order=300">300</td> 
</tr> 
<tr> 
    <td "data-order=2096">2096</td> 
</tr> 

よりHTML5の属性は、検索、ソート、フィルタリングの問題を解決するために利用されている、など

https://datatables.net/examples/advanced_init/html5-data-attributes.html

+0

答えが役立つ、引用符の位置が間違っています。 – Ken