2

Tenho um ckeckbox que tem intenção de marca todas as opções disponíveis em uma tabela Jquery-DaTaTabeles, mas após á paginação os próximos Checkbox não foram marcados, ou seja, na segunda página eles já não estão mais marcados.

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

1
  • Sugiro que você poste o HTML que é gerado, desta forma o pessoal conseguirá te ajudar melhor. Do jeito que você postou teríamos que adivinhar o que seu servidor processa. Commented 29/07/2014 às 22:04

2 Respostas 2

2

Recomendo usar o evento de paginação: page.dt, que é disparado sempre que alguma paginação é feita.

Obs: Se sua tabela tiver ordenação ou filtro, a tabela é refeita, logo é preciso refazer as marcações. Para isso usei o evento de order.dt e search.dt.

Com esse evento é possível marcar todos os elementos caso o seu check "mestre" (marcar todos) esteja marcado.

O codigo seria:

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);
});

O uso do setTimeout(..., 1) faz com que a execução da função toggleMarcarTodos seja "escalonada" para depois de todo processamento que o DataTable faz para reconstruir a tabela com os novos dados.

Coloquei um pequeno exemplo nesse JSFiddle, caso queira observar o comportamento.

0
1

Neste código todas checkbox que tiverem a class='marcar' irá receber o checked, isto irá acontecer no momento em que o script for chamado, no caso você condicionou no evento click de um outro elemento, quando a "próxima pagina" for chamada, se o evento click acontecer irá marcar todos novamente, caso o evento não aconteça ou na nova pagina os elementos não tiverem a class='marcar' isso não irá acontecer. ( Se não me engano esse script de marcar precisa ser escrito novamente após um elemento seja inserido de forma dinamica na pagina)

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .