How to see if checkbox is toggled and perform action according to that, in datatables using jquery?

Question

I have a button which I need to be hidden or visible based on whether any checkbox in my dataTable is checked or not,

<input type = "submit" id = "update-button" class = "ml-5 btn btn-warning" value = "Update Selected" style = "color: white" hidden>

I am using these two for the checkbox in my Datatable

<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>

I have now defined my DataTable like this,

var table = $("#classroom_teachers_table").DataTable({
      "processing": true, 
      "paging": true,
      "serverSide": true, 
      "info": false,
      "ajax": {
        url: "action.php", 
        method: "POST", 
        data: {action: "get_classroom_teachers"},
      },
      'columnDefs': [
         {
            'targets': 0,
            'checkboxes': {
               'selectRow': true
            }
         }
      ],
      'select': {
         'style': 'multi'
      },
      'order': [[1, 'asc']]
      
    });

What I want now is to check whether any checkbox is clicked or not... That is, I want to make an "on" function whenever a checkbox is clicked by the user. That function will then check the number of checkboxes ticked in the datatable. If the number is greater than 0, it will display the input button (by removing hidden attribute) and if not then it will change the attribute hidden to true...

But I don't get that on what should I call this function? like,

$("#classroom_teachers_table tbody).on("click", function(){ 

*function*

)};

What should I write instead of #classroom_teachers_table tbody so that this function is called only when the checkbox is clicked/unclicked?

And also, can I do it within my table? Instead of a creating a completely new Jquery function?

Note that you are missing a `"` in `$("#classroom_teachers_table tbody).on("click", function(){` after `#classroom_teachers_table tbody` — Carsten Løvbo Andersen, Sep 10 '20 at 09:05
@CarstenLøvboAndersen yes, thank you for correcting it. I have used it only as an example however to explain what I want to be done. — Sakib Khan, Sep 10 '20 at 09:08

score 3 · Accepted Answer · edited Nov 06 '21 at 09:05

If I understood you right, this is what your looking for:

$(document).ready(function() {
   var table = $('#example').DataTable({
      'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json',
      'columnDefs': [
         {
            'targets': 0,
            'checkboxes': {
               'selectRow': true,
               'selectCallback': function(nodes, selected) {
                  
                  var rows_selected = table.column(0).checkboxes.selected();
                  if(rows_selected.length > 0) $("#update-button").show();
                  else $("#update-button").hide();
               }
            }
         }
      ],
      'select': 'multi',
      'order': [[1, 'asc']]
   });
});

<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.10/css/dataTables.checkboxes.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.10/js/dataTables.checkboxes.min.js"></script>

<input type="submit" id="update-button" class="ml-5 btn btn-warning" value="Update Selected" style="color: white; display: none;">
<br><br>
<table id="example" class="display" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th></th>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Extn</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>
</table>

Note: For some reason the hidden attribute is not working in the Code Snippet, so I had to use the CSS display property, in order to show/hide your button.

How to see if checkbox is toggled and perform action according to that, in datatables using jquery?

1 Answers1