Hide checkbox in jquery datatables

Question

Hide checkbox in jquery datatables

Navigation

#1 by (3 votes)
#2 by (3 votes)

2

I have a problem when I want to hide checkbox inside a column of a table with datatables.

The problem is that only the checkboxes that are shown in the table are hidden, if for example I am showing 10 rows, only the checkboxes of those 10 rows are hidden, if I continue to the next page of the table the others follow visible.

How can I make all the checkboxes hide?

Below I leave the code I have so far

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

javascript jquery datatables

asked by Juan Pinzón 15.07.2016 в 16:20

source

2 answers

3

I would do it with the events that DataTables offers, in this specific case I would use draw , this event is activated every time the table is "drawn", this includes paging.

The process would be to have a boolean-type global variable that determines whether the checkboxes should be hidden or not, and use it in the function that is called by the event:

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

Clearly we are duplicating code, which is not the best practice, at least this idea should guide you and the refactoring I leave it to you.

answered by 15.07.2016 в 16:55

Read php associative array '' Solitaire game '' simple mode, with lists in C language

score 3 · Accepted Answer

What you can do is the following:

Create a boolean variable and initialize it to false

When you click on a checkbox

If the variable in step 1 is false
- update it to true
- hides the rest of checkboxes
If the variable was true
- update it to false
- shows the rest of checkboxes

When the table is redrawn (event draw ), depending on the value of the variable created in point 1, you will hide (or not) the 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>