jQueryデータテーブルを使用してカスタムデフォルトソートを実装する方法

Question

価格列をデフォルトで（ページロード時に）降順でソートする必要があるテーブルがあります。また、この列をクリックすると、並べ替え（ascまたはdesc）する必要があります。

ここにはJSFiddleがあります。

HTML

<div id="table_container"> 
    <table id="products"> 
     <thead> 
      <tr> 
       <th>id</th> 
       <th>name</th> 
       <th>price</th> 
      </tr> 
     </thead> 
     <tbody></tbody> 
    </table> 
</div> 

JS

var oTable = $("#products").dataTable({ 
     "aaData": [ 
      [1, "car1", "<span class='hidden'><a class='imgLoading' href=''></a></span>$40.50"], 
      [2, "car2", "<span class='hidden'><a class='imgLoading' href=''></a></span>$20.91"], 
      [3, "car3", "<span class='hidden'><a class='imgLoading' href=''></a></span>$10.00"] 
     ], 
     "aaSorting":[[3, 'desc']], 
     "aoColumns": [{ 
      "sWidth": "70%", 
      "sClass": "center", 
      "bSortable": false 
     }, { 
      "sWidth": "70%", 
      "sClass": "center", 
      "bSortable": false 
     }, { 
      "sWidth": "70%", 
      "sClass": "center", 
      "bSortable": true, 
      "sType": "duration" 
     }] 

    }); 

誰も私がこれをしてください実装するのに役立つ可能性があり？。

Answer 1

あなたはほとんどそこにいる：

var oTable = $("#products").dataTable({ 
    "aaData": [ 
     [1, "car1", "$40.50"], 
     [2, "car2", "$20.91"], 
     [3, "car3", "$10.00"] 
    ], 
    "aaSorting": [ 
     [2, 'asc'] 
    ], 
    "aoColumns": [{ 
     "sWidth": "70%", 
     "sClass": "center", 
     "bSortable": false, 
     "sTitle": "id" 
    }, { 
     "sWidth": "20%", 
     "sClass": "center", 
     "bSortable": false, 
     "sTitle": "name" 
    }, { 
     "sWidth": "10%", 
     "sClass": "center", 
     "bSortable": true, 
     "sType": "currency", 
     "sTitle": "price" 
    }] 
}); 

と通貨のプラグインが含まれ、これにあなたのHTMLを変更：覚えて

<div id="table_container"> 
    <table id="products"></table> 
</div> 

事はターゲットが0基づいていることで、そのためのあなた3のターゲットが存在しなかった場合、ターゲットを2にする必要がありました（id = 0、name = 1 & price = 2）。希望が役立ちます。

編集JSFiddle

基本的に、あなたはそれがあなたのためにそれを行うために取得することができ、DataTableのは、より多くの足の仕事をできるようにする必要があり、HTMLでそれを渡すと、細胞を作成するための最良の方法ではありません。

$.extend($.fn.dataTableExt.oSort, { 
    "dom_currency-pre": function(a) { 
     a = $(a).text(); 
     a = (a === "-") ? 0 : a.replace(/[^\d\-\.]/g, ""); 
     return parseFloat(a); 
    }, 
    "dom_currency-asc": function(a, b) { 
     return a - b; 
    }, 
    "dom_currency-desc": function(a, b) { 
     return b - a; 
    } 
}); 
var oTable = $("#products").dataTable({ 
    "aaData": [ 
     [1, "car1", "$40.50"], 
     [2, "car2", "$20.91"], 
     [3, "car3", "$10.00"] 
    ], 
    "aaSorting": [ 
     [2, 'desc'] 
    ], 
    "aoColumns": [{ 
     "sWidth": "70%", 
     "sClass": "center", 
     "bSortable": false, 
     "sTitle": "id" 
    }, { 
     "sWidth": "20%", 
     "sClass": "center", 
     "bSortable": false, 
     "sTitle": "name" 
    }, { 
     "sWidth": "10%", 
     "sClass": "center", 
     "bSortable": true, 
     "sType": "dom_currency", 
     "sTitle": "price", 
     "mRender": function(data, type, row) { 
      return '<span><span class="hidden"><a class="imgLoading" href="#"></a></span>' + data + '</span>'; 
     } 
    }] 
}); 

希望は役立ちます。

Answer 2

データテーブルの通貨プラグインをインポートし、カラム2にタイプcurrencyを追加する必要があります（0から始まることを覚えておいてください）。

通貨プラグインの詳細情報：https://datatables.net/plug-ins/sorting/currency

それは作業だ!!!

var oTable = $("#products").dataTable({ 
    "aaData": [ 
     [1, "car1", "<span class='hidden'><a class='imgLoading' href=''></a></span>$40.50"], 
     [2, "car2", "<span class='hidden'><a class='imgLoading' href=''></a></span>$20.91"], 
     [3, "car3", "<span class='hidden'><a class='imgLoading' href=''></a></span>$10.00"] 
    ], 
    "aaSorting":[[2, 'desc']], 
    "aoColumns": [{ 
     "sWidth": "70%", 
     "sClass": "center", 
     "bSortable": false 
    }, { 
     "sWidth": "70%", 
     "sClass": "center", 
     "bSortable": false 
    }, { 
     "sWidth": "70%", 
     "sClass": "center", 
     "bSortable": true, 
     "sType": "currency" 
    }] 

}); 

結果：私は私の実際の質問を編集したhttp://jsfiddle.net/cmedina/4uLsoxp0/2/