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> 

Próbuję dokonać wyboru checkall zaznaczenie wszystkich pól wyboru przy użyciu tego kodu:

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

As DataTable przedstawia pierwszy 10,20,30 .. itp. wierszy i usuwa inne z DOM, aby zrobić paginację, ten kod jQuery tylko wybiera wiersze na bieżącej stronie. Czy jest tak, że mogę zaznaczyć wszystkie pola wyboru?

Answer 1

znalazłem rozwiązanie

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

Answer 2

Myślę, że nie jest to możliwe, użyłbym innego parametru do powiadomienia serwera o sprawdzeniu wszystkich rekordów. W ten sposób możesz zaimplementować logikę do sprawdzenia wszystkich po stronie serwera.

Answer 3

DataTables udostępnia wtyczkę "TableTools", który obejmuje tę funkcję.

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

Oto przykłady doboru wierszy, zarówno dla pojedynczego wybierz i mulit-select:

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

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

dodatkowo, kiedy zainicjować DataTable z Wtyczka TableTools aktywowana, otrzymujesz dostęp do następujących metod API:

• fnIsSelected
• fnSelect
• fnSelectAll
• fnSelectNone

metody API udokumentowane tutaj:
http://datatables.net/extras/tabletools/api

Answer 4

stary wątek, ale mam kilka składek.

Aby automatycznie wygenerować kolumny pole wyboru, zamiast robić to inline, dodać do swojej definicji kolumny:

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

Jak RUN-CMD zaproponował można użyć TableTools obsługiwać wiersz selekcji, ale nie zrobił” t help op, ponieważ wybieranie/zaznaczanie wszystkich wierszy jest niezależne od sprawdzania wiersza. Jednak jest to miły wzmacniacz wizualny.

Możemy sprawdzić programowo wyboru wiersz dodając ten kod do funkcji _fnRowSelect() w TableTools.js (funkcja linie 1079 - 1119 w moim pliku):

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

A skoro już edycji ten plik, zróbmy nowy przycisk TableTools, który przełącza wybierz wszystko/wybierz brak. Teraz nie będziemy musieli wiązać obu funkcji na jednym przycisku.

Będziemy tworzyć ten przycisk po prawej wybrać wszystkie i wybierz przyciski równych w TableTools.js (zaczynając od linii 2393 w moim pliku):

/* 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; 
     } 
    } 
}), 

Teraz możemy zastosować nasz zaznacz wszystko/Brak przełącznika przez nazywając to tak, jak każdy przycisk TableTools. W naszym stole narzędzia procesu init:

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

Również w swoich rodzimych DataTables init, można użyć:

Javascript:

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

html:

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

Jeśli chcesz usunąć styl przycisku i umieść go w nagłówku tabeli jako normalny checkbox all/none controller. Jeśli nie używasz bootstrap, rozważ zrobienie czegoś takiego (link) w swoim CSS, a kod powinien działać poprawnie.

Pod warunkiem, wszystko poszło gładko dla ciebie, wynik powinien być czymś tak: http://screencast.com/t/c3ZDi0mmiGj

Największy wygoda jest kierowana pole wyboru: sprawdzone nieruchomości z dowolnego miejsca wewnątrz wiersza, a nie tylko na kliknięcie pola wyboru. Przydatne dla użytkowników wysokiej rozdzielczości lub mobilnych touchpunch/touchstart.

Answer 5

Moje rozwiązanie działa zbyt:

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

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

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

A jeśli chcesz sprawdzić tylko filtrowane (jeśli używasz Dom na filtrowaniu w DataTables), to można to wykorzystać, aby sprawdzić tylko filtrowane

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

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

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