1. casa
  2. Domanda e risposta
  3. Come posso selezionare tutte le caselle da tutte le pagine in un DataTable jQuery

Come posso selezionare tutte le caselle da tutte le pagine in un DataTable jQuery

2015-04-27 16 views
11

Ho una pagina HTML con più caselle di controllo e singolarmente possono essere controllate. Ho il pulsante per "Seleziona tutto" e quando faccio clic su questo pulsante tutte le caselle di controllo dovrebbero essere selezionate, e quando faccio di nuovo clic sullo stesso pulsante tutte le caselle dovrebbero essere deselezionate da tutte le pagine.Come posso selezionare tutte le caselle da tutte le pagine in un DataTable jQuery

Nel mio programma originale ci sono migliaia di record, ma alla volta vengono visualizzati 10 record, ma quando l'utente fa clic su seleziona dovrebbe selezionare tutti i record di migliaia.

Sto utilizzando jQuery Datatables plug-in per la visualizzazione dei dati. Fornisce l'impaginazione, la ricerca, l'ordinamento, ecc. Così in un momento sto visualizzando solo 10 record sulla mia pagina corrente. se faccio clic sul numero successivo o sulla pagina fornita da Bootstrap Datatable verranno visualizzati altri 10 record. Come menzione nel problema, voglio selezionare tutte le caselle di controllo da tutte le pagine.

$(document).ready(function() { 
 
    $('body').on('click', '#selectAll', function() { 
 
     if ($(this).hasClass('allChecked')) { 
 
     $('input[type="checkbox"]', '#example').prop('checked', false); 
 
     } else { 
 
     $('input[type="checkbox"]', '#example').prop('checked', true); 
 
     } 
 
     $(this).toggleClass('allChecked'); 
 
    }) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<html> 
 
     <head> 
 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 
     <title>monitoring</title> 
 
     <script src="jquery.js"></script> 
 
     </head> 
 
     <body> 
 
     <table id="example" class="myclass"> 
 
     <thead> 
 
     <tr> 
 
     <th> 
 
      <button type="button" id="selectAll" class="main"> 
 
      <span class="sub"></span> Select </button></th> 
 
     \t <th>Name</th> 
 
     \t <th>Company</th> 
 
     \t <th>Employee Type</th> 
 
     \t <th>Address</th> 
 
     \t <th>Country</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     \t \t \t \t \t \t \t \t \t \t 
 
     <tr> 
 
     <td><input type="checkbox"/> 
 
     </td> 
 
     <td>varun</td> 
 
     <td>TCS</td> 
 
     <td>IT</td> 
 
     <td>San Francisco</td> 
 
     <td>US</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><input type="checkbox"/> 
 
     </td> 
 
     <td>Rahuk</td> 
 
     <td>TCS</td> 
 
     <td>IT</td> 
 
     <td>San Francisco</td> 
 
     <td>US</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><input type="checkbox"/> 
 
     </td> 
 
     <td>johm Doe</td> 
 
     <td>TCS</td> 
 
     <td>IT</td> 
 
     <td>San Francisco</td> 
 
     <td>US</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><input type="checkbox"/> 
 
     </td> 
 
     <td>Sam</td> 
 
     <td>TCS</td> 
 
     <td>IT</td> 
 
     <td>San Francisco</td> 
 
     <td>US</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><input type="checkbox"/> 
 
     </td> 
 
     <td>Lara</td> 
 
     <td>TCS</td> 
 
     <td>IT</td> 
 
     <td>San Francisco</td> 
 
     <td>US</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><input type="checkbox"/> 
 
     </td> 
 
     <td>Jay</td> 
 
     <td>TCS</td> 
 
     <td>IT</td> 
 
     <td>San Francisco</td> 
 
     <td>US</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><input type="checkbox"/> 
 
     </td> 
 
     <td>Tom</td> 
 
     <td>TCS</td> 
 
     <td>IT</td> 
 
     <td>San Francisco</td> 
 
     <td>US</td> 
 
     </tr> 
 
     \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
     </tbody> 
 
     </table> 
 
     \t \t \t \t 
 
     </body> 
 
     </html>

fonte

2015-04-27 Varun

+0

possibile duplicato di [Seleziona tutte le caselle di controllo utilizzando il tasto] (http://stackoverflow.com/questions/29841547/select- all-check-boxes-using-button) – EdenSource

+0

Il 'table'tag non è un tag a chiusura automatica, si prega di cambiare'

'e rimuovere il'/' – jmgross

+0

You ha postato la stessa domanda http: // StackOverflow.it/questions/29841547/select-all-check-boxes-using-button e http://stackoverflow.com/questions/29823843/how-do-i-select-all-check-box-when-i-click- on-select-button-con-jquerry? ** Utilizza i link di modifica sulle stesse domande ** –

risposta

15

Prova questo codice invece:

$(document).ready(function() { 
    var oTable = $('#example').dataTable({ 
     stateSave: true 
    }); 

    var allPages = oTable.fnGetNodes(); 

    $('body').on('click', '#selectAll', function() { 
     if ($(this).hasClass('allChecked')) { 
      $('input[type="checkbox"]', allPages).prop('checked', false); 
     } else { 
      $('input[type="checkbox"]', allPages).prop('checked', true); 
     } 
     $(this).toggleClass('allChecked'); 
    }) 
});

La magia deve avvenire in fnGetNodes():

fnGetNodes(): ottenere un array dei nodi TR che vengono utilizzati nel corpo del tavolo

Modifica

Questa alternativa la soluzione è principalmente per il debug (per vedere se funziona). Codice difficilmente ottimale:

$(document).ready(function() { 
    var oTable = $('#example').dataTable({ 
     stateSave: true 
    }); 

    var allPages = oTable.cells().nodes(); 

    $('#selectAll').click(function() { 
     if ($(this).hasClass('allChecked')) { 
      $(allPages).find('input[type="checkbox"]').prop('checked', false); 
     } else { 
      $(allPages).find('input[type="checkbox"]').prop('checked', true); 
     } 
     $(this).toggleClass('allChecked'); 
    }) 
});

fonte

2015-04-27 14:20:47 Mackan

+0

scusa per essere stato così stupido ma puoi aiutarmi con questo. Sono totalmente nuovo con questo. o semplicemente dare un'idea di come faccio a fare questo – Varun

+0

@varun Ho aggiornato entrambi i codici un po '- dal momento che la versione più recente di _DataTables_ apparentemente usa un'altra definizione di opzioni. – Mackan

+1

sei un genio. finalmente l'hai fatto il primo codice ha funzionato alla fine – Varun

0

DEMO

Il modo più semplice è quello di utilizzare seguente codice jQuery:

// EDIT al secondo clic, è ora di rimuovere tutte le caselle controllato.

$('#selectAll').click(function(e) { 
 
    if($(this).hasClass('checkedAll')) { 
 
     $('input').prop('checked', false); 
 
     $(this).removeClass('checkedAll'); 
 
    } else { 
 
     $('input').prop('checked', true); 
 
     $(this).addClass('checkedAll'); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
     <head> 
 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 
     <title>monitoring</title> 
 
     <script src="jquery.js"></script> 
 
     </head> \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <body> 
 
     <table id="example" class="myclass"/> 
 
     <thead> 
 
     <tr> 
 
     <th> 
 
      <button type="button" id="selectAll" class="main"> 
 
      <span class="sub"></span> Select </button></th> 
 
     \t <th>Name</th> 
 
     \t <th>Company</th> 
 
     \t <th>Employee Type</th> 
 
     \t <th>Address</th> 
 
     \t <th>Country</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     \t \t \t \t \t \t \t \t \t \t 
 
     <tr> 
 
     <td><input type="checkbox"/> 
 
     </td> 
 
     <td>varun</td> 
 
     <td>TCS</td> 
 
     <td>IT</td> 
 
     <td>San Francisco</td> 
 
     <td>US</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><input type="checkbox"/> 
 
     </td> 
 
     <td>Rahuk</td> 
 
     <td>TCS</td> 
 
     <td>IT</td> 
 
     <td>San Francisco</td> 
 
     <td>US</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><input type="checkbox"/> 
 
     </td> 
 
     <td>johm Doe</td> 
 
     <td>TCS</td> 
 
     <td>IT</td> 
 
     <td>San Francisco</td> 
 
     <td>US</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><input type="checkbox"/> 
 
     </td> 
 
     <td>Sam</td> 
 
     <td>TCS</td> 
 
     <td>IT</td> 
 
     <td>San Francisco</td> 
 
     <td>US</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><input type="checkbox"/> 
 
     </td> 
 
     <td>Lara</td> 
 
     <td>TCS</td> 
 
     <td>IT</td> 
 
     <td>San Francisco</td> 
 
     <td>US</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><input type="checkbox"/> 
 
     </td> 
 
     <td>Jay</td> 
 
     <td>TCS</td> 
 
     <td>IT</td> 
 
     <td>San Francisco</td> 
 
     <td>US</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><input type="checkbox"/> 
 
     </td> 
 
     <td>Tom</td> 
 
     <td>TCS</td> 
 
     <td>IT</td> 
 
     <td>San Francisco</td> 
 
     <td>US</td> 
 
     </tr> 
 
     \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
     </tbody> 
 
     </table> 
 
     \t \t \t \t 
 
     </body> 
 
     </html>

fonte

2015-04-27 13:06:04

+0

non funziona – Varun

+0

funziona? puoi eseguire lo snippet di codice sopra. non dimenticare di aggiungere la libreria jquery nel proprio frammento! –

+0

Ho incluso la libreria jQuery nel mio codice ma ancora non funziona – Varun

1

Try This,

if ($(this).hasClass('allChecked')) { 
 
    $('input[type="checkbox"]').prop('checked', 'checked') 
 
    } else { 
 
    $('input[type="checkbox"]').prop('checked', 'false') 
 
    }

fonte

2015-04-27 13:08:10 syms

1

Usa $ esempio DataTable per le selezioni https://datatables.net/docs/DataTables/1.9.4/#$

$(document).ready(function() { 
    var oTable = $('#example').dataTable({ 
     stateSave: true 
    }); 

    $("#selectAll").on("change", function(){ 
     oTable.$("input[type='checkbox']").attr('checked', $(this.checked)); 
    }); 
});

fonte

2017-08-25 14:41:08

 Problemi correlati

  • Nessun problema correlato^_^