3

データ テーブルを使用してページ分割された多数のレコードを含むテーブルがあります。最初のヘッダー列はすべて選択チェックボックスで、すべての行に独自のチェックボックスがあります。

テーブルに次の機能を追加したいと考えています。

1) ユーザーはテーブルをナビゲートし、チェックボックスをランダムに選択/選択解除できます。

2) 広告の [すべて選択] チェックボックスをクリックすると、現在表示されているすべてのレコードのみをオンまたはオフにする必要があります。

3）「すべて選択」ボタンは、データテーブルのさまざまなページの状態（チェック/チェック解除）を維持する必要があります。たとえば、ユーザーがページ 1 で [すべて選択] をクリックして次のページに移動した場合、[すべて選択] チェックボックスの選択を解除し、もう一度クリックすると、このページのすべての行がチェックされますが、以前に選択されたチェックボックスは影響を受けません。

これまでのところ、チェックの選択を処理する次のコードがあります。

$('#selectAllCheck').click(function(e) {

    var chk = $(this).prop('checked');
    var currentRows = $('#myTable tbody tr');

    $.each(currentRows, function(){
        $(this).find(':checkbox[name=statusCheckbox]').each(function(){
            $(this).prop('checked', chk);
        });
    });
  });

私は_('tr', {"filter":"applied"});関数を認識していますが、すべての行を返すだけです。どうしてか分かりません。

上記のコードで (1) と (2) を既に実装しており、正常に動作します。唯一の問題は、異なるページでの「すべて選択」機能の動作です。datatables.net を調べましたが、これに関連するものは見つかりませんでした。

4

3 に答える 3

2

関数「fnGetNodes」を使用するため、コードは次のとおりです。

  var table = $('#your-table-id ').DataTable();

  jQuery('#your-table-id .group-checkable').change(function () {      

            var checked = jQuery(this).is(":checked");

            jQuery( "input", table.fnGetNodes() ).each(function(){                  
                 if(checked)
                 {                                                                         
                    $(this).attr("checked", true);                                                                                                                    
                 }
                 else
                 {                                                                                               
                    $(this).attr("checked", false);                        
                 }
            })                
  });

.group-checkable は、すべての行を選択するためのテーブル ヘッドのチェックボックスのクラスです。

于 2014-07-07T08:58:32.017 に答える