Jquery Datatables Multiple Checkboxes selection

Question

I am using Datatables plugin, I implemented followig scenario of ussing checkboxes. There is functionality to mark single checkbox and All Checkboxes as in code below

$(document).ready(function (){
     
     /** Handling checboxes selection*/
     
     function updateDataTableSelectAllCtrl(table){
   var $table             = table.table().node();
   var $chkbox_all        = $('tbody input[type="checkbox"]', $table);
   var $chkbox_checked    = $('tbody input[type="checkbox"]:checked', $table);
   var chkbox_select_all  = $('thead input[name="select_all"]', $table).get(0);

   // If none of the checkboxes are checked
   if($chkbox_checked.length === 0){
      chkbox_select_all.checked = false;
      if('indeterminate' in chkbox_select_all){
         chkbox_select_all.indeterminate = false;
      }

   // If all of the checkboxes are checked
   } else if ($chkbox_checked.length === $chkbox_all.length){
      chkbox_select_all.checked = true;
      if('indeterminate' in chkbox_select_all){
         chkbox_select_all.indeterminate = false;
      }

   // If some of the checkboxes are checked
   } else {
      chkbox_select_all.checked = true;
      if('indeterminate' in chkbox_select_all){
         chkbox_select_all.indeterminate = true;
      }
   }
}
 
 /** Responsive table with colreorder, fixed header;footer, sortable teble*/
   var table = $('#example').DataTable({
    
             responsive: {
    details: {
      type: 'column'
    }
  },
  order: [1, 'asc'],
       colReorder: {
        fixedColumnsLeft: 1,
        fixedColumnsLeft: 2
    },
        fixedHeader: {
                header: true,
                footer: true
            }, 
      'columnDefs': [{
         'targets': 1,
         'searchable': false,
         'orderable': false,
         'width': '1%',
         'className': 'dt-body-center'
      },
      {
    'className': 'control',
    'orderable': false,
    targets: 0
  }, 
      ],
      'order': [[1, 'asc']],
      'rowCallback': function(row, data, dataIndex){
         // Get row ID
         var rowId = data[6];

         // If row ID is in the list of selected row IDs
         if($.inArray(rowId, /**rows_selected */) !== -1){
            $(row).find('input[type="checkbox"]').prop('checked', true);
            $(row).addClass('selected');
         }
      }
   });
   
   /** mark single checkboxes */
   
$(document).ready(function (){
   // Array holding selected row IDs
   var rows_selected = [];
 

   // Handle click on checkbox
   $('#example tbody').on('click', 'input[type="checkbox"]', function(e){
      var $row = $(this).closest('tr');

      // Get row data
      var data = table.row($row).data();

      // Get row ID
      var rowId = data[6];

      // Determine whether row ID is in the list of selected row IDs
      var index = $.inArray(rowId, rows_selected);

      // If checkbox is checked and row ID is not in list of selected row IDs
      if(this.checked && index === -1){
         rows_selected.push(rowId);

      // Otherwise, if checkbox is not checked and row ID is in list of selected row IDs
      } else if (!this.checked && index !== -1){
         rows_selected.splice(index, 1);
      }

      if(this.checked){
         $row.addClass('selected');
      } else {
         $row.removeClass('selected');
      }

      // Update state of "Select all" control
      updateDataTableSelectAllCtrl(table);

      // Prevent click event from propagating to parent
      e.stopPropagation();
   });

   // Handle click on table cells with checkboxes
 $('#example').on('click', 'tbody td, thead th:first-child', function(e){
   $(this).parent().find('input[type="checkbox"]').trigger('click');
});

   // Handle click on "Select all" control
   $('thead input[name="select_all"]', table.table().container()).on('click', function(e){
      if(this.checked){
         $('#example tbody input[type="checkbox"]:not(:checked)').trigger('click');
      } else {
         $('#example tbody input[type="checkbox"]:checked').trigger('click');
      }

      // Prevent click event from propagating to parent
      e.stopPropagation();
   });

   // Handle table draw event
   table.on('draw', function(){
      // Update state of "Select all" control
      updateDataTableSelectAllCtrl(table);
   });

   // Handle form submission event
   $('#frm-example').on('submit', function(e){
      var form = this;

      // Iterate over all selected checkboxes
      $.each(rows_selected, function(index, rowId){
         // Create a hidden element
         $(form).append(
             $('<input>')
                .attr('type', 'hidden')
                .attr('name', 'id[]')
                .val(rowId)/**there are data from json file or db*/
         );
      });
      
            $('#example-console').text($(form).serialize());
      console.log("Form submission", $(form).serialize());
       
      // Remove added elements
      $('input[name="id\[\]"]', form).remove();
       
      // Prevent actual form submission
      e.preventDefault();
   });

});
   
   
   
     /** Handling responsive expand collapse all*/
   
   
 
    // Handle click on "Expand All" button
    $('#btn-show-all-children').on('click', function(){
        // Expand row details
        table.rows(':not(.parent)').nodes().to$().find('td:first-child').trigger('click');
    });

    // Handle click on "Collapse All" button
    $('#btn-hide-all-children').on('click', function(){
        // Collapse row details
        table.rows('.parent').nodes().to$().find('td:first-child').trigger('click');
    });
});

<html>
     <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
    <link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    
    
<link href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css" rel="stylesheet"/>


    
 
        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>     
        <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>  
     </head>

    <body>
    
    
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th></th>
                  <th><input  name="select_all" value="1" type="checkbox" autocomplete="off"></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                  <td></td>
                   <td><input type="checkbox" name="deleteProduct" autocomplete="off"></td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                        <td></td>
                   <td><input type="checkbox" name="deleteProduct" autocomplete="off"></td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                      <td></td>
                   <td><input type="checkbox" name="deleteProduct" autocomplete="off"></td>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                        <td></td>
                   <td><input type="checkbox" name="deleteProduct" autocomplete="off"></td>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td></td>
                   <td><input type="checkbox" name="deleteProduct" autocomplete="off"></td>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
           
        </tbody>
        <tfoot>
            <tr>
                <th></th> 
                <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
 
     </body>
     
     </html>

And I am Asking about this how to modify the code to get functionality of mark multiple checkboxes using Shift, Crtl. By Using Shift I mean 'Holding down Shift' and select some records from listed table. By using Shift, Crtl 'holding down the shift and control keys at the same time' and select some records in another place when some another records are already selected. Checkboxes Must! be defined in html page (I do not define checkboxes by javascript like https://datatables.net/extensions/select/examples/initialisation/checkbox.html ).

I focused basically at this how to change this code

 $('#example tbody').on('click', 'input[type="checkbox"]', function(e){
  var $row = $(this).closest('tr');

  // Get row data
  var data = table.row($row).data();

  // Get row ID
  var rowId = data[6];

  // Determine whether row ID is in the list of selected row IDs
  var index = $.inArray(rowId, rows_selected);

  // If checkbox is checked and row ID is not in list of selected row IDs
  if(this.checked && index === -1){
     rows_selected.push(rowId);

  // Otherwise, if checkbox is not checked and row ID is in list of selected row IDs
  } else if (!this.checked && index !== -1){
     rows_selected.splice(index, 1);
  }

  if(this.checked){
     $row.addClass('selected');
  } else {
     $row.removeClass('selected');
  }

  // Update state of "Select all" control
  updateDataTableSelectAllCtrl(table);

  // Prevent click event from propagating to parent
  e.stopPropagation();});

Something like:

$(document).ready(function() {

var chkboxShiftLastChecked = [];

$('[data-chkbox-shiftsel]').click(function(e){
    var chkboxType = $(this).data('chkbox-shiftsel');
    if(chkboxType === ''){
        chkboxType = 'default';
    }
    var $chkboxes = $('[data-chkbox-shiftsel="'+chkboxType+'"]');

    if (!chkboxShiftLastChecked[chkboxType]) {
        chkboxShiftLastChecked[chkboxType] = this;
        return;
    }

    if (e.shiftKey) {
        var start = $chkboxes.index(this);
        var end = $chkboxes.index(chkboxShiftLastChecked[chkboxType]);

        $chkboxes.slice(Math.min(start,end), Math.max(start,end)+ 1).prop('checked', chkboxShiftLastChecked[chkboxType].checked);
    }

    chkboxShiftLastChecked[chkboxType] = this;
});});

This worked with checkbox selection, but table rows were not highlighted as in single selection Maybe somone can help, Thank you