Mark all checkboxes of a Datatable table?

Question

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

BEHOLD:

$(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>
<script src="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>

Answer 1

I recommend using the pagination event: page.dt, that is fired whenever any pagination is made.

Note: If your table has sort or filter, the table is redone, so you need to redo the markups. To do this I used the order.dt and search.dt.

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

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) makes the execution of the function toggleMarcarTodos is "staggered" to after all processing that the 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.

Answer 2

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

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