Wybór wszystkich widocznych wierszy po przeprowadzeniu wyszukiwania, używając przycisku „selectAll” w Danych tabeli

Question

Mam inicjowane z danych tabeli, mający id przykład tak -

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" 
     } 
    } 
}); 

niż ja starałem się wybrać wszystkie wiersze po wyszukiwanie z poniższym kodzie kiedy selectAll kliknięciu przycisku -

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'); 
     }); 
    }); 
}); 

jestem rodzaj utracone po tym. selectAll wciąż wybiera wszystkie wiersze na tej stronie.

Aby to rozwinąć, załóżmy, że na bieżącej stronie tabeli danych znajduje się 10 wierszy. Po wyszukiwaniu pokazuje 2 rzędy. Teraz chcę wybrać 2 wiersze, gdy kliknięty zostanie przycisk selectAll.

Answer 1

Uważam, że Twoim ogólnym problemem jest to, że nie resetujesz odznaczonych (nie przefiltrowanych) wierszy. Właśnie przełączasz .selected dla filtrowanych wierszy, ostatecznie kończąc na wszystkich zaznaczonych wierszach. Również umieściłbym kod w metodzie action, ponieważ w rzeczywistości nadpisujesz domyślną funkcję selectAll.

{ 
    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');   
    }) 
    } 
} 

demo - code>https://jsfiddle.net/sqmz7z76/

Answer 2

davidkonrad jest głównie w porządku, ale to nie na oficjalnych metod. Jest to prawidłowy kod używać:

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

Zamiast prostego przełączania klasy „wybrany”, to wywołuje metodę „select()”, co z kolei umożliwia przycisk „Odznacz wszystko” i wyświetla stopkę tekst informujący, ile wierszy zostało wybranych.