Question

私はJquery Datatableを使用しています。最初の列にヘッダーと行をチェックボックスで表示させ、残りの行のチェックボックスでヘッダーチェックボックスの選択を切り替える必要があります。私は以下の実装を持っています。

DataTableの属性

"aoColumns": [{ "sTitle": "<input type='checkbox' id='selectall' onclick='toggleChecks(this);' ></input>", "mDataProp": null, "sWidth": "20px", "sDefaultContent": "<input type='checkbox' ></input>", "bSortable": false },null,null,null,null,null,null] 

DataTableの行

<td><input type="checkbox' class="case"></input></td> 

のJavascript機能

function toggleChecks(obj) 
    { 
     $('.case').prop('checked', obj.checked); 
    } 

私は、単一のページの午前たときにこれがうまく働いています。しかし、私がページングを行うと、他のページのチェックボックスはチェックされません。すべてのチェックボックスで一貫して動作するためにこれを達成する方法。手伝ってください。

Answer 1

ページが変更されたときに関数fnDrawCallbackを使用してテーブルを更新する必要があります。

ヘッダーチェックボックスの値をチェックインし、新しい行のチェックボックスを更新することができます。

モデル内のオブジェクトにブール値を追加し、チェックまたはチェック解除するとその値を変更することもできます。モデルにアクセスすると、レンダリングされた要素だけでなく、すべての要素の値を変更できます。次に、セルをロードすると、そのチェックボックスで真/偽を表します。これは最も一貫したアプローチですが、おそらくモデルとビューの間に良好な同期を得るためにはるかに多くの作業が必要になります。

Answer 2

みんな、

は、迅速なソリューションを必要とし、同様の問題がありました。私は動的にテーブルにいくつかのデータをフィードとして

：この問題の回避策を作った

は、誰かを助けるかもしれない

oTable1.fnAddData 
([ 
    "<span id='" + any_obj.id + "' style='display:block; width: 10px;'><input class='checkbox' type='checkbox' /></span>", 
    title, 
    modified, 
    version 
]); 

お知らせチェックボックスのためのスパン。これは明らかに隠れたままであり、簡単にアクセスできます。私のようなものを行っている

Answer 3

、準備書類上の

$('#selectall').change(function() { 
         var isSelected = $(this).is(':checked'); 
         if(isSelected){ 
          $('.case').prop('checked', true); 
         }else{ 
          $('.case').prop('checked', false); 
         } 
        }); 

。