のjQueryのDataTable checkall

Question

HTML

<div class="box"> 
<table id="Datatable"> 
    <thead> 
     <tr> 
     <th><input name="checkall" type="checkbox" class="checkall" value="ON" /></th> 
     <th>field</th> 
     <th>field</th> 
     <th>field</th> 
     <th>field</th> 
     <th>field</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <th class="checkers"><input type="checkbox" name="selected[]"/></th> 
     <td>value</td>           
     <td>value</td> 
     <td>value</td> 
     <td>value</td> 
     <td>value</td> 
     </tr> 
    </tbody> 
</table> 
</div> 

は、このコードを使用して、すべてのチェックボックスを選択します。

$('.checkall').click(function() { 
     var checkall =$(this).parents('.box:eq(0)').find(':checkbox').attr('checked', this.checked); 
     $.uniform.update(checkall); 
    }); 

のDataTableが最初10,20,30を示していたよう.. 。などの行を削除し、DOMから他のページを削除してページングを行います。このjQueryコードでは、現在のページの行のみが選択されます。とにかく、すべてのチェックボックスを選択できるのですか？

Answer 1

iが溶液に

$('.checkall', oTable.fnGetNodes()).click(function() { 

Answer 2

私は、すべてのレコードがチェックされたことをサーバーに通知するために別のパラメータを使用することはできないと思います。そのようにして、サーバ側ですべてチェックするロジックを実装することができます。

Answer 3

のDataTableを発見し、この機能を含むプラグイン "TableTools" を提供します。

http://datatables.net/extras/tabletools/

は、ここでは、両方のための行選択の例であり、単一の選択とmulit選択：あなたとあなたのデータテーブルを初期化

http://datatables.net/release-datatables/extras/TableTools/select_single.html

http://datatables.net/release-datatables/extras/TableTools/select_multi.html

さらに

、 TableToolsプラグインを有効にすると、次のAPIメソッドにアクセスできます。

• がfnSelectNone
• fnSelectAll
• fnSelect

を

をfnIsSelected APIメソッドは、ここに記載されています：
http://datatables.net/extras/tabletools/api

Answer 4

旧スレッドが、私はいくつかの貢献を持っています。

チェックボックス列を自動生成ではなく、このインラインを行うために、あなたの列の定義にこれを追加します。RUN-CMDは、あなたが行選択を処理するためにTableToolsを使用することができます示唆したが、これは」didnのとおり

"aoColumnDefs": [ { "mRender": function (data, type, full) { 
    return '<input type="checkbox" id="id" class="class" value="' + data + '">'; }, "aTargets": [0] } ] 

// Note: aTargets is the zero-indexed array determining placement of the checkbox column 
// "aTargets": [0] gives you the first column (first from left) 

すべての行を選択/強調表示することは、行の入力をチェックすることとは別になっているためです。しかし、それは素晴らしい視覚的エンハンサーです。

私たちは、プログラムTableTools.jsで_fnRowSelect（）関数（関数は、行1079である - 私のファイルに1119年）にこのコードを追加することで、行のチェックボックスをチェックすることができます。

// This marks them as selected 
    for (i=0, len=data.length ; i<len ; i++) 
    { 
     data[i]._DTTT_selected = true; 

     if (data[i].nTr) 
     { 
      $(data[i].nTr).addClass(that.classes.select.row); 
      // Now if there's a checkbox somewhere in the row - we check it 
      $(data[i].nTr).closest("tr").find('input[type="checkbox"]').prop('checked', 'checked'); 
     } 
    } 

そして、我々が編集している間、このファイルでは、すべてを選択/非選択を切り替える新しいTableToolsボタンを作成しましょう。これで、両方の機能を1つのボタンにバインドする必要はありません。

我々は（私のファイルの行2393から始まる）全てを選択してTableTools.jsになしボタンを選択し、右後にこのボタンを作成します：今、私たちは、当社の選択すべて/なしトグルを適用することができます

/* Combines select_all and select_none buttons 
* Default button text is a checkbox 
* to strip button style and use a checkbox alone put this on native page: 
* $(".select-all-master").removeClass("btn"); 
*/ 
"select_master": $.extend({}, TableTools.buttonBase, { 
    "sButtonText": '<input type="checkbox" id="master_check" class="row_checks master_check" value="">', 
    "sButtonClass": "select-all-master", 
    "sAction": "div", 
    "sTag": "div", 
    "fnClick": function(nButton, oConfig) { 
     var that = this; 
     var selected = false; 
     $("table tr").each(function(i) { 
      if ($(this).hasClass("active")) { 
       selected = true; 
      } 
     }); 
     if (selected==false) { 
      that.fnSelectAll(); 
      $("#master_check").prop('checked', 'checked'); 
     } 
     if (selected==true) { 
      that.fnSelectNone(); 
      $("#master_check").prop('checked', ''); 
      selected = false; 
     } 
    } 
}), 

TableToolsのボタンと同じように呼びます。私たちのテーブルにはツールがINIT：

Javascriptを：あなたのネイティブのDataTableでも

"aButtons": [ { "sExtends": "select_master","sToolTip": "Tool tip to display on checkbox hover" } ] 

はあなたが使用することができますinitを

$(document).ready(function() { 
    $(".select-all-master").appendTo("thead#selectallbtn"); 
    $(".select-all-master").removeClass("btn"); 
}); 

HTML：削除したい場合は

<thead class="selectallbtn"></thead> 

ボタンのスタイルと通常のチェックボックスのすべて/なしコントローラとしてあなたのテーブルのヘッダーに入れます。 ブートストラップを使用していない場合は、CSSでこのようなことを行うことを検討してください（コードはlink）。 http://screencast.com/t/c3ZDi0mmiGj

最大の利便性は、チェックボックスをターゲットにされています：すべてはあなたのため順調提供

、結果はこの何かする必要があります行の内部だけではなく、チェックボックスをクリックして上の任意の場所からプロパティをチェックします。高解像度のユーザーやモバイルのタッチパネル/タッチスタートに役立ちます。

Answer 5

私のソリューションは、あまりにも動作します：

$('.checkall').click(function(e) { 

      var chk = $(this).prop('checked'); 

      $('input', oTable.fnGetNodes()).prop('checked',chk); 
     }); 

そして、あなたは（あなたがDataTableの中で、フィルタリングのためのDOMを使用している場合）にのみフィルタを確認したい場合は、その後、あなただけ

$('.checkall').click(function(e) { 

      var chk = $(this).prop('checked'); 

      $('input', oTable.$('tr', {"filter": "applied"})).prop('checked',chk); 
     });