sprawdza wszystkie pola wyboru w DataTable, w tym ukryte wiersze.

Question

Próbuję utworzyć funkcję, która sprawdza wszystkie pola wyboru w DataTable, w tym ukryte wiersze. Oto kod html do "wyboru" kolumny:

<div class="usersTable" id="userTable"> 
    <table cellpadding="0" cellspacing="0" id="customersList" > 
     <thead> 
      <tr> 
       <th><input type="checkbox" name="selectall" id="selectall" class="selectall"/></th> 
       <th width="200">val1</th> 
       <th width="80px">val2</th> 
       <th width="70px">val3</th> 
       <th width="450">val4</th> 
       <th width="60px">val5</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

Umieść przycisk:

<input type='button' value='select all' id='selectallboxes' name='selectallboxes' /> 

I kod JQuery że nie działa:

$(function() {   
    otable = $('#customersList').dataTable({ 
     "bJQueryUI": true, 
     "sPaginationType": "full_numbers", 
     "aLengthMenu" : [ [10,20,50,100,1000], [10,20,50,100,1000] ], 
     "iDisplayLength": 100, 
     "bProcessing": true, 
     "bServerSide": true, 
     "aaSorting":[],   
     "iDisplayStart": 0, 
     "sAjaxSource": "filename", 
     .... 

$("#selectallboxes").click (function() { 
     alert(dt.fnGetNodes().length + ' is total number') 
     var selected = new Array(); 
     $('input', dt.fnGetNodes()).each(function() { 
       $(this).attr('checked','checked'); 
       selected.push($(this).val());      
     }); 
     // convert to a string 
     var mystring = selected.length; 
     alert(mystring); 
}) 

Answer 1

Ok, więc to powinieneś być tym, na co masz ochotę, to znajdzie całą bieżącą stronę i przejdzie przez nie za pomocą dataTables _ API. Możesz zmienić filtr w zależności od potrzeb, aby wybrać różne wiersze, jeśli chcesz, wszystko to jest udokumentowane w dokumentacji danych.

$("#selectallboxes").click (function() 
{ 
    var selected = new Array(); 

    // Use the _ function instead to filter the rows to the visible 
    var data = oTable._('tr', {"filter":"applied"}); 

    $.each(data, function(key, index) 
    { 
     var input = $(this).find('input[type="checkbox"]'); 

     input.attr('checked', 'checked'); 

     selected.push(input.val()); 
    }); 

    // convert to a string 
    var mystring = selected.length; 

    alert(mystring); 
}); 

Answer 2

Spróbuj:

$("#selectallboxes").click(function() { 
    var selected = new Array(); 
    $(otable.fnGetNodes()).find(':checkbox').each(function() { 
     $this = $(this); 
     $this.attr('checked', 'checked'); 
     selected.push($this.val()); 
    }); 
    // convert to a string 
    var mystring = selected.join(); 
    alert(mystring); 
}); 

.length daje długość tablicy. Użyłem join(), aby połączyć tablicę w łańcuch. DataTable's .fnGetNodes() podaje wszystkie wiersze w tabeli, w tym ukryte.

Answer 3

spróbować czegoś jak

$("#selectallboxes").click (function() { 
    var selected = []; 
    $('input:checkbox', otable).each(function() { 
     selected.push($(this).prop('checked', true).val());      
    }); 
    // convert to a string 
    alert(selected.join()); 
}) 

Answer 4

fnGetNodes() daje tylko wiersze, które są widoczne, nie jest rozszerzeniem dostać ukryte wiersze powodu fnGetHiddenNodes paginacji(), ale że będzie współpracować z jquery elementu datatable wersji 1.9, jest aktualizacja dla tego samego w jquery datatable 1.10, ale to nie działa. Możesz przechowywać swoje dane otrzymane z żądania ajax w tablicy, a następnie w oparciu o warunek checkbox kliknij zdarzenia ponownie narysuj tabelę z danymi i wprowadzeniem (pole wyboru) z wybranym atrybutem.