Check all the checkboxes of a DataTable table?

Navigation
2

I have a ckeckbox that intends to tag all available options in a table Jquery-DaTaTabeles , but after pagination the next Checkbox were not marked, ie on the second page they are no longer marked.

VEJAM : 

$(document).ready(function() {
    $('#example').DataTable();

    //JQUERY PARA MARCAR O CHECKBOX
    $('#ckTodos').click(function() {
        var check = $(this).is(':checked');
        $('.marcar').each(function() {
            $(this).prop("checked", check);
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link href='https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'>
<table id="example" class="display" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th><input type='checkbox' id='ckTodos'/>
         <th>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Age</th>
         <th>Start date</th>
         <th>Salary</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th></th>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Age</th>
         <th>Start date</th>
         <th>Salary</th>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td><input type='checkbox' class='marcar'/>
         <td>
         <td>Tiger Nixon</td>
         <td>System Architect</td>
         <td>Edinburgh</td>
         <td>61</td>
         <td>2011/04/25</td>
         <td>$320,800</td>
      </tr>
      <tr>
         <td><input type='checkbox' class='marcar'/>
         <td>
         <td>Garrett Winters</td>
         <td>Accountant</td>
         <td>Tokyo</td>
         <td>63</td>
         <td>2011/07/25</td>
         <td>$170,750</td>
      </tr>
      <tr>
         <td><input type='checkbox' class='marcar'/>
         <td>
         <td>Ashton Cox</td>
         <td>Junior Technical Author</td>
         <td>San Francisco</td>
         <td>66</td>
         <td>2009/01/12</td>
         <td>$86,000</td>
      </tr>
      <tr>
         <td><input type='checkbox' class='marcar'/>
         <td>
         <td>Cedric Kelly</td>
         <td>Senior Javascript Developer</td>
         <td>Edinburgh</td>
         <td>22</td>
         <td>2012/03/29</td>
         <td>$433,060</td>
      </tr>
      <tr>
         <td><input type='checkbox' class='marcar'/>
         <td>
         <td>Airi Satou</td>
         <td>Accountant</td>
         <td>Tokyo</td>
         <td>33</td>
         <td>2008/11/28</td>
         <td>$162,700</td>
      </tr>
      <tr>
         <td><input type='checkbox' class='marcar'/>
         <td>
         <td>Brielle Williamson</td>
         <td>Integration Specialist</td>
         <td>New York</td>
         <td>61</td>
         <td>2012/12/02</td>
         <td>$372,000</td>
      </tr>
      <tr>
         <td><input type='checkbox' class='marcar'/>
         <td>
         <td>Herrod Chandler</td>
         <td>Sales Assistant</td>
         <td>San Francisco</td>
         <td>59</td>
         <td>2012/08/06</td>
         <td>$137,500</td>
      </tr>
      <tr>
         <td><input type='checkbox' class='marcar'/>
         <td>
         <td>Rhona Davidson</td>
         <td>Integration Specialist</td>
         <td>Tokyo</td>
         <td>55</td>
         <td>2010/10/14</td>
         <td>$327,900</td>
      </tr>
      <tr>
         <td><input type='checkbox' class='marcar'/>
         <td>
         <td>Colleen Hurst</td>
         <td>Javascript Developer</td>
         <td>San Francisco</td>
         <td>39</td>
         <td>2009/09/15</td>
         <td>$205,500</td>
      </tr>
      <tr>
         <td><input type='checkbox' class='marcar'/>
         <td>
         <td>Sonya Frost</td>
         <td>Software Engineer</td>
         <td>Edinburgh</td>
         <td>23</td>
         <td>2008/12/13</td>
         <td>$103,600</td>
      </tr>
      <tr>
         <td><input type='checkbox' class='marcar'/>
         <td>
         <td>Jena Gaines</td>
         <td>Office Manager</td>
         <td>London</td>
         <td>30</td>
         <td>2008/12/19</td>
         <td>$90,560</td>
      </tr>
      <tr>
         <td><input type='checkbox' class='marcar'/>
         <td>
         <td>Quinn Flynn</td>
         <td>Support Lead</td>
         <td>Edinburgh</td>
         <td>22</td>
         <td>2013/03/03</td>
         <td>$342,000</td>
      </tr>
      <tr>
         <td><input type='checkbox' class='marcar'/>
         <td>
         <td>Charde Marshall</td>
         <td>Regional Director</td>
         <td>San Francisco</td>
         <td>36</td>
         <td>2008/10/16</td>
         <td>$470,600</td>
      </tr>
      <tr>
         <td><input type='checkbox' class='marcar'/>
         <td>
         <td>Haley Kennedy</td>
         <td>Senior Marketing Designer</td>
         <td>London</td>
         <td>43</td>
         <td>2012/12/18</td>
         <td>$313,500</td>
      </tr>
      <tr>
         <td><input type='checkbox' class='marcar'/>
         <td>
         <td>Tatyana Fitzpatrick</td>
         <td>Regional Director</td>
         <td>London</td>
         <td>19</td>
         <td>2010/03/17</td>
         <td>$385,750</td>
      </tr>
      <tr>
         <td><input type='checkbox' class='marcar'/>
         <td>
         <td>Michael Silva</td>
         <td>Marketing Designer</td>
         <td>London</td>
         <td>66</td>
         <td>2012/11/27</td>
         <td>$198,500</td>
      </tr>
      <tr>
         <td><input type='checkbox' class='marcar'/>
         <td>
         <td>Paul Byrd</td>
         <td>Chief Financial Officer (CFO)</td>
         <td>New York</td>
         <td>64</td>
         <td>2010/06/09</td>
         <td>$725,000</td>
      </tr>
      <tr>
         <td><input type='checkbox' class='marcar'/>
         <td>
         <td>Gloria Little</td>
         <td>Systems Administrator</td>
         <td>New York</td>
         <td>59</td>
         <td>2009/04/10</td>
         <td>$237,500</td>
      </tr>
      <tr>
         <td><input type='checkbox' class='marcar'/>
         <td>
         <td>Bradley Greer</td>
         <td>Software Engineer</td>
         <td>London</td>
         <td>41</td>
         <td>2012/10/13</td>
         <td>$132,000</td>
      </tr>
   </tbody>
</table>
    
asked by anonymous 25.07.2014 / 16:00

2 answers

2

I recommend using the paging event: page.dt , which fires whenever some pagination is done.

Note: If your table has an order or filter, the table is redone, so it is necessary to redo the markings. For this I used the event order.dt and search.dt .

With this event you can mark all the elements if your "master" check (check all) is checked.

The code would be: 

function toggleMarcarTodos(event) {
    var $tabela = $("#example");
    var check = $("#ctl00_ContentPlaceHolder1_rptComunicado_ctl00_ckTodos", $tabela).is(':checked');
    var $checks = $('.marcar', $tabela);

    // Se a sua coluna tiver ordenacao, tem que prevenir de ordenar ao clicar no checkbox! 
    event && event.stopPropagation();

    $checks.each(function () {
        $(this).prop("checked", check);
   });
}

// Se houver o evento de paginação ou ordenação ou filtro, é preciso marcar todos novamente.
$('#example').on('page.dt, order.dt, search.dt', function () {
    setTimeout(toggleMarcarTodos, 1);
});

The use of setTimeout(..., 1) causes the execution of the toggleMarcarTodos function to be "staggered" after all processing that DataTable does to rebuild the table with the new data.

I put a small example in this JSFiddle , if you want to observe the behavior.

    
16.09.2014 / 02:45
1

In this code all checkboxes that have the class = 'mark' will get checked, this will happen at the time the script is called, in case you conditioned on the click event of another element, when the 'next page' is called, if the click event happens it will redial all, in case the event does not happen or in the new page the elements do not have the class = 'marca' this will not happen. (If I'm not mistaken this markup script needs to be written again after an element is inserted dynamically on the page) 

$('.marcar').each(function () {
   $(this).prop("checked", check);
});
    
15.08.2014 / 23:04
Page in aspx running on asp net mvc Error making Build at Jenkins