Jquery datatable con checkbox nell'intestazione e nella riga: seleziona tutte le checkbox non funzionanti

Question

Sto usando Jquery Datatable. Voglio avere una prima colonna con intestazione e righe con una casella di controllo e dovrebbe alternare la selezione della casella di controllo dell'intestazione con le caselle rimanenti. Ho sotto l'implementazione.

attributo Datatable

"aoColumns": [{ "sTitle": "<input type='checkbox' id='selectall' onclick='toggleChecks(this);' ></input>", "mDataProp": null, "sWidth": "20px", "sDefaultContent": "<input type='checkbox' ></input>", "bSortable": false },null,null,null,null,null,null] 

fila Datatable

<td><input type="checkbox' class="case"></input></td> 

funzione Javascript

function toggleChecks(obj) 
    { 
     $('.case').prop('checked', obj.checked); 
    } 

Questa è lavorato bene quando io sono a pagina singola. Ma quando eseguo il paging, le caselle di controllo rimangono deselezionate per le altre pagine. Come ottenere questo risultato comportandosi in modo coerente per tutte le checkbox. Si prega di aiutare.

Answer 1

È necessario utilizzare la funzione fnDrawCallback per aggiornare la tabella quando la pagina cambia.

È possibile verificare in questa funzione il valore della casella di controllo dell'intestazione e aggiornare le nuove caselle di controllo.

È anche possibile aggiungere un valore booleano agli oggetti nel modello e modificare tale valore quando si seleziona o deseleziona. Se accedi al modello puoi modificare i valori di tutti i tuoi elementi, non solo quelli renderizzati. Quindi, quando carichi le tue celle, rappresenti quello vero/falso con la casella di controllo. Questo è l'approccio più coerente, ma probabilmente richiederà molto più lavoro per ottenere un buon syncro tra il modello e la vista.

Answer 2

ragazzi,

ha avuto un problema simile che necessitava di una soluzione rapida.

Realizzato una soluzione per questo problema, potrebbe aiutare qualcuno:

Come mi nutro in modo dinamico la tabella di alcuni dati:

oTable1.fnAddData 
([ 
    "<span id='" + any_obj.id + "' style='display:block; width: 10px;'><input class='checkbox' type='checkbox' /></span>", 
    title, 
    modified, 
    version 
]); 

Avviso l'arco per la casella di controllo. Questo ovviamente rimane nascosto e si può accedere facilmente.

Answer 3

ho fatto qualcosa di simile,

$('#selectall').change(function() { 
         var isSelected = $(this).is(':checked'); 
         if(isSelected){ 
          $('.case').prop('checked', true); 
         }else{ 
          $('.case').prop('checked', false); 
         } 
        }); 

sul documento pronto.