jQuery DataTables Checkboxes: Data Sources - Ajax

For more information, see https://www.gyrocode.com/projects/jquery-datatables-checkboxes/

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.css">
<script src="https://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/js/dataTables.checkboxes.min.js"></script>
<link rel="stylesheet" href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/css/dataTables.checkboxes.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.css">
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.js"></script>
<h3><a href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/">jQuery DataTables Checkboxes</a>: <a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/data-sources/">Data Sources</a> - <a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/data-sources/ajax/">Ajax</a></h3>
    
<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>

<hr><a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/basic/basic-initialization/">See full article on Gyrocode.com</a>

JavaScript

$(document).ready(function() {
  
   var hrtable = $('#example').DataTable({
   "dom": "<'row'<'col-lg-12 col-md-12 col-sm-12 col-xs-12'B>><'row'<'col-lg-12 col-md-12 col-sm-12 col-xs-12'rt>><'row custome-container'<'col-lg-2 col-md-3 col-sm-12 col-xs-12'l><'col-lg-5 col-md-5 col-sm-12 col-xs-12'p><'col-lg-5 col-md-4 col-sm-12 col-xs-12'i>>",
      'ajax': 'https://api.myjson.com/bins/1us28',
      'columnDefs': [
         {
            'targets': 0,
            'checkboxes': {
              'selectRow': false,
              'selectCallback': function(){
                printSelectedRows();
              }
            }
         }
      ],
      'select': {
             'style': 'multi',
              'selector' : 'td:first-child'
          },
      'order': [[1, 'asc']],
      'buttons': [
            {
                'text': 'Edit',
                'className': 'edit-multiple-records'               
            }
        ]
   });
   
   
   // Print selected rows
function printSelectedRows(){       
    var rows_selected = hrtable.column(0).checkboxes.selected();
       selectedids=[];
    	$.each(rows_selected, function(index, DT_RowId){
             selectedids.push(DT_RowId);
         });
           return selectedids;
 };
 
 $('.edit-multiple-records').on('click',function(e){
     var rows_selected = hrtable.column(0).checkboxes.selected();
    alert(rows_selected.join(","));
    //$('input[type="checkbox"]', hrtable.cells().nodes()).prop('checked',false);
    hrtable.columns().checkboxes.deselect(true)
 });
 
 
});