私はこのようなデータテーブル持つID <strong>例</strong>を初期化した

Question

データ・テーブルに「のSelectAll」ボタンを使用して検索した後、すべての可視の行を選択する - 私は後にすべての行を選択しようとしていたより

var table = $("#example").DataTable({ 
    "aaSorting": [[4, "asc"]], 
    select: true, 
    dom: 'Bfrtip', 
    buttons: [ 
     'excelHtml5', 
     { 
      extend: 'pdfHtml5', 
      orientation: 'portrait', 
      pageSize: 'LEGAL' 
     }, 
     { 
      extend: 'print', 
      pageSize: 'LEGAL', 
      title: 'Visible rows' 
     }, 
     { 
      extend: 'selectAll', 
      className: 'selectall' 
     } 
    ], 
    language: { 
     buttons: { 
      selectAll: "Select all rows" 
     } 
    } 
}); 

のSelectAllボタンをクリックすると、以下のコードで検索 -

table.on('search.dt', function (e) { 
    e.preventDefault(); 
    $(".selectall").click(function (e) { 
     e.preventDefault(); 
     var rows_after_search = table.rows({search: 'applied'}).nodes(); 
     rows_after_search.each(function() { 
      $(this).toggleClass('selected'); 
     }); 
    }); 
}); 

私は一種のこの後に失われています。 selectAllは、そのページのすべての行を選択しています。

詳細については、Data-tableの現在のページに10行があるとします。検索後、2行が表示されます。今、私はselectAllボタンをクリックしながら2行を選択したいと思います。

Answer 1

一般的な問題は、選択解除（フィルタリングされていない）行をリセットしていないと思われます。フィルタリングされた行に対して.selectedをトグルするだけで、最終的にはすべての行が選択されます。また、実際にはselectAllのデフォルト機能をオーバーライドしているので、コードをactionメソッドに配置します。

{ 
    extend: 'selectAll', 
    className: 'selectall', 
    action : function(e) { 
    e.preventDefault(); 
    table.rows({ page: 'all'}).nodes().each(function() { 
     $(this).removeClass('selected') 
    }) 
    table.rows({ search: 'applied'}).nodes().each(function() { 
     $(this).addClass('selected');   
    }) 
    } 
} 

デモ - >https://jsfiddle.net/sqmz7z76/

Answer 2

davidkonradのコードは、主に右であるが、それは公式の方法を使用していません。

が

{ 
    extend: 'selectAll', 
    className: 'selectall', 
    action : function(e) { 
    e.preventDefault(); 
    table.rows({ search: 'applied'}).deselect(); 
    table.rows({ search: 'applied'}).select(); 
    } 
} 

の代わりに単に「選択された」クラスを切り替えるには、それが今度は、「すべてを選択解除」ボタンを可能にし、フッターを表示する方法「を選択し（）」を呼び出します。これは正しいコードを使用することです選択された行の数を示すテキスト。