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

user_13827116 0
Viewed 564

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?

jquery-datatables-checkboxes datatables jquery javascript
1 Answers

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.

user_74711800
Related