2

Tengo un problema al momento de querer ocultar checkbox dentro de una columna de una tabla con datatables.

El problema es que solo se ocultan solo los checkbox's que se muestran en la tabla, si por ejemplo estoy mostrando 10 filas, solo se ocultan los checkbox's de esas 10 filas, si sigo a la siguiente pagina de la tabla los demás siguen visibles.

¿Cómo puedo hacer para que todos los checkbox's se oculten?

A continuación dejo el código que tengo hasta ahora

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

$( "input:checkbox" ).click(function() {
  if ($('input:checkbox:checked').length === 0) {
    $("input:checkbox:not(:checked)").show();
  }else{
    $("input:checkbox:not(:checked)").hide();
  }
});
<!DOCTYPE html>
<html>
<head> 
  <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<table id="example" class="display nowrap dataTable dtr-inline" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
  <thead>
    <tr role="row">
      <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 136px;">Name</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 216px;">Seleccionar</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 216px;">Position</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 101px;">Office</th>
      <th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="width: 42px;">Age</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="width: 93px;">Start date</th>
      <th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="width: 79px;">Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th rowspan="1" colspan="1">Name</th>
      <th rowspan="1" colspan="1">Seleccionar</th>
      <th rowspan="1" colspan="1">Position</th><th rowspan="1" colspan="1">Office</th>
      <th class="dt-body-right" rowspan="1" colspan="1">Age</th>
      <th rowspan="1" colspan="1">Start date</th>
      <th class="dt-body-right" rowspan="1" colspan="1">Salary</th>
    </tr></tfoot><tbody><tr role="row" class="odd"><td class="sorting_1">Airi Satou</td><td><input type="checkbox" /></td><td>Accountant</td><td>Tokyo</td><td class=" dt-body-right">33</td><td>2008/11/28</td><td class=" dt-body-right">$162,700</td></tr><tr role="row" class="even"><td class="sorting_1">Angelica Ramos</td><td><input type="checkbox"/></td><td>Chief Executive Officer (CEO)</td><td>London</td><td class=" dt-body-right">47</td><td>2009/10/09</td><td class=" dt-body-right">$1,200,000</td></tr><tr role="row" class="odd"><td class="sorting_1">Ashton Cox</td><td><input type="checkbox"/></td><td>Junior Technical Author</td><td>San Francisco</td><td class=" dt-body-right">66</td><td>2009/01/12</td><td class=" dt-body-right">$86,000</td></tr><tr role="row" class="even"><td class="sorting_1">Bradley Greer</td><td><input type="checkbox"/></td><td>Software Engineer</td><td>London</td><td class=" dt-body-right">41</td><td>2012/10/13</td><td class=" dt-body-right">$132,000</td></tr><tr role="row" class="odd"><td class="sorting_1">Brenden Wagner</td><td><input type="checkbox"/></td><td>Software Engineer</td><td>San Francisco</td><td class=" dt-body-right">28</td><td>2011/06/07</td><td class=" dt-body-right">$206,850</td></tr><tr role="row" class="even"><td class="sorting_1">Brielle Williamson</td><td><input type="checkbox"/></td><td>Integration Specialist</td><td>New York</td><td class=" dt-body-right">61</td><td>2012/12/02</td><td class=" dt-body-right">$372,000</td></tr><tr role="row" class="odd"><td class="sorting_1">Bruno Nash</td><td><input type="checkbox"/></td><td>Software Engineer</td><td>London</td><td class=" dt-body-right">38</td><td>2011/05/03</td><td class=" dt-body-right">$163,500</td></tr><tr role="row" class="even"><td class="sorting_1">Caesar Vance</td><td><input type="checkbox"/></td><td>Pre-Sales Support</td><td>New York</td><td class=" dt-body-right">21</td><td>2011/12/12</td><td class=" dt-body-right">$106,450</td></tr><tr role="row" class="odd"><td class="sorting_1">Cara Stevens</td><td><input type="checkbox"/></td><td>Sales Assistant</td><td>New York</td><td class=" dt-body-right">46</td><td>2011/12/06</td><td class=" dt-body-right">$145,600</td></tr><tr role="row" class="even"><td class="sorting_1">Cedric Kelly</td><td><input type="checkbox"/></td><td>Senior Javascript Developer</td><td>Edinburgh</td><td class=" dt-body-right">22</td><td>2012/03/29</td><td class=" dt-body-right">$433,060</td></tr><tr role="row" class="odd"><td class="sorting_1">Charde Marshall</td><td><input type="checkbox"/></td><td>Regional Director</td><td>San Francisco</td><td class=" dt-body-right">36</td><td>2008/10/16</td><td class=" dt-body-right">$470,600</td></tr><tr role="row" class="even"><td class="sorting_1">Colleen Hurst</td><td><input type="checkbox"/></td><td>Javascript Developer</td><td>San Francisco</td><td class=" dt-body-right">39</td><td>2009/09/15</td><td class=" dt-body-right">$205,500</td></tr><tr role="row" class="odd"><td class="sorting_1">Dai Rios</td><td><input type="checkbox"/></td><td>Personnel Lead</td><td>Edinburgh</td><td class=" dt-body-right">35</td><td>2012/09/26</td><td class=" dt-body-right">$217,500</td></tr><tr role="row" class="even"><td class="sorting_1">Donna Snider</td><td><input type="checkbox"/></td><td>Customer Support</td><td>New York</td><td class=" dt-body-right">27</td><td>2011/01/25</td><td class=" dt-body-right">$112,000</td></tr><tr role="row" class="odd"><td class="sorting_1">Doris Wilder</td><td><input type="checkbox"/></td><td>Sales Assistant</td><td>Sidney</td><td class=" dt-body-right">23</td><td>2010/09/20</td><td class=" dt-body-right">$85,600</td></tr><tr role="row" class="even"><td class="sorting_1">Finn Camacho</td><td><input type="checkbox"/></td><td>Support Engineer</td><td>San Francisco</td><td class=" dt-body-right">47</td><td>2009/07/07</td><td class=" dt-body-right">$87,500</td></tr><tr role="row" class="odd"><td class="sorting_1">Fiona Green</td><td><input type="checkbox"/></td><td>Chief Operating Officer (COO)</td><td>San Francisco</td><td class=" dt-body-right">48</td><td>2010/03/11</td><td class=" dt-body-right">$850,000</td></tr><tr role="row" class="even"><td class="sorting_1">Garrett Winters</td><td><input type="checkbox"/></td><td>Accountant</td><td>Tokyo</td><td class=" dt-body-right">63</td><td>2011/07/25</td><td class=" dt-body-right">$170,750</td></tr><tr role="row" class="odd"><td class="sorting_1">Gavin Cortez</td><td><input type="checkbox"/></td><td>Team Leader</td><td>San Francisco</td><td class=" dt-body-right">22</td><td>2008/10/26</td><td class=" dt-body-right">$235,500</td></tr><tr role="row" class="even"><td class="sorting_1">Gavin Joyce</td><td><input type="checkbox"/></td><td>Developer</td><td>Edinburgh</td><td class=" dt-body-right">42</td><td>2010/12/22</td><td class=" dt-body-right">$92,575</td></tr><tr role="row" class="odd"><td class="sorting_1">Gloria Little</td><td><input type="checkbox"/></td><td>Systems Administrator</td><td>New York</td><td class=" dt-body-right">59</td><td>2009/04/10</td><td class=" dt-body-right">$237,500</td></tr><tr role="row" class="even"><td class="sorting_1">Haley Kennedy</td><td><input type="checkbox"/></td><td>Senior Marketing Designer</td><td>London</td><td class=" dt-body-right">43</td><td>2012/12/18</td><td class=" dt-body-right">$313,500</td></tr><tr role="row" class="odd"><td class="sorting_1">Hermione Butler</td><td><input type="checkbox"/></td><td>Regional Director</td><td>London</td><td class=" dt-body-right">47</td><td>2011/03/21</td><td class=" dt-body-right">$356,250</td></tr><tr role="row" class="even"><td class="sorting_1">Herrod Chandler</td><td><input type="checkbox"/></td><td>Sales Assistant</td><td>San Francisco</td><td class=" dt-body-right">59</td><td>2012/08/06</td><td class=" dt-body-right">$137,500</td></tr><tr role="row" class="odd"><td class="sorting_1">Hope Fuentes</td><td><input type="checkbox"/></td><td>Secretary</td><td>San Francisco</td><td class=" dt-body-right">41</td><td>2010/02/12</td><td class=" dt-body-right">$109,850</td></tr></tbody></table>
</body>
</html>

2 respuestas 2

2

Lo que puedes hacer es lo siguiente:

  1. Crea una variable booleana e inicializala a false
  2. Cuando se hace click en un checkbox
    • Si la variable del paso 1 es false
      • actualízala a true
      • esconde el resto de checkboxes
    • Si la variable era true
      • actualízala a false
      • muestra el resto de checkboxes
  3. Cuando se redibuje la tabla (evento draw), dependiendo del valor de la variable creada en el punto 1, ocultarás (o no) los checkboxes.

// definimos una variable que controlara si un checkbox ya esta seleccionado
var checkbox_seleccionado = false;

$(document).ready(function(){
  $('#example').DataTable();
  
  // cuando se redibuja la tabla
  $('#example').on( 'draw.dt', function () {
    // si ya existe un checkbox seleccionado, se esconde el resto
    if (checkbox_seleccionado) {
      $("input:checkbox:not(:checked)").hide();
    } else {
      $("input:checkbox").show();
    }
  });
});

$( "input:checkbox" ).click(function() {
  
  // actualizamos el valor de la variable
  checkbox_seleccionado = !checkbox_seleccionado;
  
  if ($('input:checkbox:checked').length === 0) {
    $("input:checkbox:not(:checked)").show();
  }else{
    $("input:checkbox:not(:checked)").hide();
  }
});
<!DOCTYPE html>
<html>
<head> 
  <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<table id="example" class="display nowrap dataTable dtr-inline" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
  <thead>
    <tr role="row">
      <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 136px;">Name</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 216px;">Seleccionar</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 216px;">Position</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 101px;">Office</th>
      <th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="width: 42px;">Age</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="width: 93px;">Start date</th>
      <th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="width: 79px;">Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th rowspan="1" colspan="1">Name</th>
      <th rowspan="1" colspan="1">Seleccionar</th>
      <th rowspan="1" colspan="1">Position</th><th rowspan="1" colspan="1">Office</th>
      <th class="dt-body-right" rowspan="1" colspan="1">Age</th>
      <th rowspan="1" colspan="1">Start date</th>
      <th class="dt-body-right" rowspan="1" colspan="1">Salary</th>
    </tr></tfoot><tbody><tr role="row" class="odd"><td class="sorting_1">Airi Satou</td><td><input type="checkbox" /></td><td>Accountant</td><td>Tokyo</td><td class=" dt-body-right">33</td><td>2008/11/28</td><td class=" dt-body-right">$162,700</td></tr><tr role="row" class="even"><td class="sorting_1">Angelica Ramos</td><td><input type="checkbox"/></td><td>Chief Executive Officer (CEO)</td><td>London</td><td class=" dt-body-right">47</td><td>2009/10/09</td><td class=" dt-body-right">$1,200,000</td></tr><tr role="row" class="odd"><td class="sorting_1">Ashton Cox</td><td><input type="checkbox"/></td><td>Junior Technical Author</td><td>San Francisco</td><td class=" dt-body-right">66</td><td>2009/01/12</td><td class=" dt-body-right">$86,000</td></tr><tr role="row" class="even"><td class="sorting_1">Bradley Greer</td><td><input type="checkbox"/></td><td>Software Engineer</td><td>London</td><td class=" dt-body-right">41</td><td>2012/10/13</td><td class=" dt-body-right">$132,000</td></tr><tr role="row" class="odd"><td class="sorting_1">Brenden Wagner</td><td><input type="checkbox"/></td><td>Software Engineer</td><td>San Francisco</td><td class=" dt-body-right">28</td><td>2011/06/07</td><td class=" dt-body-right">$206,850</td></tr><tr role="row" class="even"><td class="sorting_1">Brielle Williamson</td><td><input type="checkbox"/></td><td>Integration Specialist</td><td>New York</td><td class=" dt-body-right">61</td><td>2012/12/02</td><td class=" dt-body-right">$372,000</td></tr><tr role="row" class="odd"><td class="sorting_1">Bruno Nash</td><td><input type="checkbox"/></td><td>Software Engineer</td><td>London</td><td class=" dt-body-right">38</td><td>2011/05/03</td><td class=" dt-body-right">$163,500</td></tr><tr role="row" class="even"><td class="sorting_1">Caesar Vance</td><td><input type="checkbox"/></td><td>Pre-Sales Support</td><td>New York</td><td class=" dt-body-right">21</td><td>2011/12/12</td><td class=" dt-body-right">$106,450</td></tr><tr role="row" class="odd"><td class="sorting_1">Cara Stevens</td><td><input type="checkbox"/></td><td>Sales Assistant</td><td>New York</td><td class=" dt-body-right">46</td><td>2011/12/06</td><td class=" dt-body-right">$145,600</td></tr><tr role="row" class="even"><td class="sorting_1">Cedric Kelly</td><td><input type="checkbox"/></td><td>Senior Javascript Developer</td><td>Edinburgh</td><td class=" dt-body-right">22</td><td>2012/03/29</td><td class=" dt-body-right">$433,060</td></tr><tr role="row" class="odd"><td class="sorting_1">Charde Marshall</td><td><input type="checkbox"/></td><td>Regional Director</td><td>San Francisco</td><td class=" dt-body-right">36</td><td>2008/10/16</td><td class=" dt-body-right">$470,600</td></tr><tr role="row" class="even"><td class="sorting_1">Colleen Hurst</td><td><input type="checkbox"/></td><td>Javascript Developer</td><td>San Francisco</td><td class=" dt-body-right">39</td><td>2009/09/15</td><td class=" dt-body-right">$205,500</td></tr><tr role="row" class="odd"><td class="sorting_1">Dai Rios</td><td><input type="checkbox"/></td><td>Personnel Lead</td><td>Edinburgh</td><td class=" dt-body-right">35</td><td>2012/09/26</td><td class=" dt-body-right">$217,500</td></tr><tr role="row" class="even"><td class="sorting_1">Donna Snider</td><td><input type="checkbox"/></td><td>Customer Support</td><td>New York</td><td class=" dt-body-right">27</td><td>2011/01/25</td><td class=" dt-body-right">$112,000</td></tr><tr role="row" class="odd"><td class="sorting_1">Doris Wilder</td><td><input type="checkbox"/></td><td>Sales Assistant</td><td>Sidney</td><td class=" dt-body-right">23</td><td>2010/09/20</td><td class=" dt-body-right">$85,600</td></tr><tr role="row" class="even"><td class="sorting_1">Finn Camacho</td><td><input type="checkbox"/></td><td>Support Engineer</td><td>San Francisco</td><td class=" dt-body-right">47</td><td>2009/07/07</td><td class=" dt-body-right">$87,500</td></tr><tr role="row" class="odd"><td class="sorting_1">Fiona Green</td><td><input type="checkbox"/></td><td>Chief Operating Officer (COO)</td><td>San Francisco</td><td class=" dt-body-right">48</td><td>2010/03/11</td><td class=" dt-body-right">$850,000</td></tr><tr role="row" class="even"><td class="sorting_1">Garrett Winters</td><td><input type="checkbox"/></td><td>Accountant</td><td>Tokyo</td><td class=" dt-body-right">63</td><td>2011/07/25</td><td class=" dt-body-right">$170,750</td></tr><tr role="row" class="odd"><td class="sorting_1">Gavin Cortez</td><td><input type="checkbox"/></td><td>Team Leader</td><td>San Francisco</td><td class=" dt-body-right">22</td><td>2008/10/26</td><td class=" dt-body-right">$235,500</td></tr><tr role="row" class="even"><td class="sorting_1">Gavin Joyce</td><td><input type="checkbox"/></td><td>Developer</td><td>Edinburgh</td><td class=" dt-body-right">42</td><td>2010/12/22</td><td class=" dt-body-right">$92,575</td></tr><tr role="row" class="odd"><td class="sorting_1">Gloria Little</td><td><input type="checkbox"/></td><td>Systems Administrator</td><td>New York</td><td class=" dt-body-right">59</td><td>2009/04/10</td><td class=" dt-body-right">$237,500</td></tr><tr role="row" class="even"><td class="sorting_1">Haley Kennedy</td><td><input type="checkbox"/></td><td>Senior Marketing Designer</td><td>London</td><td class=" dt-body-right">43</td><td>2012/12/18</td><td class=" dt-body-right">$313,500</td></tr><tr role="row" class="odd"><td class="sorting_1">Hermione Butler</td><td><input type="checkbox"/></td><td>Regional Director</td><td>London</td><td class=" dt-body-right">47</td><td>2011/03/21</td><td class=" dt-body-right">$356,250</td></tr><tr role="row" class="even"><td class="sorting_1">Herrod Chandler</td><td><input type="checkbox"/></td><td>Sales Assistant</td><td>San Francisco</td><td class=" dt-body-right">59</td><td>2012/08/06</td><td class=" dt-body-right">$137,500</td></tr><tr role="row" class="odd"><td class="sorting_1">Hope Fuentes</td><td><input type="checkbox"/></td><td>Secretary</td><td>San Francisco</td><td class=" dt-body-right">41</td><td>2010/02/12</td><td class=" dt-body-right">$109,850</td></tr></tbody></table>
</body>
</html>

3
  • Gracias por responder, otra pregunta: si al datatables lo inicio desde una llamada ajax como puedo hacer lo mismo? el 15 jul. 2016 a las 15:24
  • @JuanPinzón ¿Cómo falla cuando se carga con AJAX?
    – Alvaro Montoro
    el 15 jul. 2016 a las 16:18
  • Ya logre corregirlo, el problema era que inicializaba datatables en la llamada ajax y no detectaba el evento click en los checks, pero creando una funcion para usarla con el evento onchange ya se soluciono. Gracias por la respuesta, me fue util :). el 15 jul. 2016 a las 16:24
2

Yo lo haría con los eventos que ofrece DataTables, en este caso específico utilizaría draw, este evento es activado cada vez que se "dibuja" la tabla, esto incluye la paginación.

El proceso sería tener una variable global tipo boolean que determine si los checkbox deben ocultarse o no, y utilizarla en la función que es llamada por el evento:

var checkHidden = false;

$(document).ready(function() {
  var eventFired = function ( checkHidden ) {
    if (checkHidden) {
      $("input:checkbox:not(:checked)").hide();
    } else {
      $("input:checkbox:not(:checked)").show();
    }
  }
  $('#example').on( 'draw.dt', function () {eventFired(checkHidden);} ).DataTable();
});

$( "input:checkbox" ).click(function() {
  if ($('input:checkbox:checked').length === 0) {
    $("input:checkbox:not(:checked)").show();
    checkHidden = false;
  } else {
    $("input:checkbox:not(:checked)").hide();
    checkHidden = true;
  }
});

Claramente estamos duplicando código, lo cual no es la mejor práctica, al menos esta idea debe guiarte y el refactoring te lo dejo.

6
  • Gracias @Shaz, muy buena alternativa. el 15 jul. 2016 a las 15:26
  • Si te fijas bien, la respuesta de Alvaro tiene un pequeño error.
    – Shaz
    el 15 jul. 2016 a las 15:30
  • que error existe?, no logro visualizarlo el 15 jul. 2016 a las 15:33
  • Al momento de "deseleccionar" el checkbox y cambiar de página.
    – Shaz
    el 15 jul. 2016 a las 15:34
  • Ah tienes razón, no se vuelven a mostrar los checks. el 15 jul. 2016 a las 15:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.