controlla tutte le caselle di controllo nel DataTable incluse le righe nascoste

Question

Sto provando a creare una funzione che controlli tutte le caselle di controllo nel DataTable, incluse le righe nascoste. Ecco il codice html per la colonna "casella di controllo":

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

pulsante Invia:

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

E il codice JQuery che non funziona:

$(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, quindi questo dovrebbe essere quello che cerchi, questo troverà tutta la pagina attuale <tr> e scorrerli tra loro utilizzando dataTables _ API. È possibile modificare il filtro in base alle proprie esigenze per selezionare diverse righe, se lo si desidera, questo è tutto documentato nella documentazione dei datatables.

$("#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

Prova:

$("#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 ti dà la lunghezza della matrice. Ho usato join() per unire l'array in una stringa. DataTable's .fnGetNodes() fornisce tutte le righe della tabella, incluse quelle nascoste.

Answer 3

provare qualcosa di simile

$("#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() darà solo le righe che sono visibili, v'è un'estensione per ottenere le righe nascoste a causa di fnGetHiddenNodes impaginazione(), ma che lavorerà con jQuery versione DataTable 1.9, c'è un aggiornamento per lo stesso in jQuery datatable 1.10 ma questo non funziona. È possibile memorizzare i dati ricevuti dalla richiesta Ajax in un array e, in base alle condizioni della casella di controllo, fare clic su evento ridisegnare la tabella con i dati e immettere (casella di controllo) con l'attributo selezionato.