File
Add library
Share
Login or Register
Help
HTML
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    
    <link href="https://nightly.datatables.net/select/css/select.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/select/js/dataTables.select.js"></script>
    <link href="https://cdn.datatables.net/scroller/2.0.6/css/scroller.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.datatables.net/scroller/2.0.6/js/dataTables.scroller.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <button id="delete-selected-rows" type="button"> <i class="fas fa-trash" style="font-size: 15px;"></i> Delete Selected Rows</button>
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th><input id='chk-select-all' type='checkbox'></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
          </tr>
        </thead>
        <tbody>
          
        </tbody>
      </table>
    </div>
  </body>
</html>
CSS
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScript
 
$(document).on('click', '#chk-select-all', function () {
    var table = $('#example').DataTable();
​
    if ($(this).prop('checked')) {
        table.rows({ search: 'applied'}).select();
    }
    else {
        table.rows().deselect();
    }
});
​
$(document).on('click', '#delete-selected-rows', function (event) {
    var selectedRowIds = [];
    var table = $('#example').DataTable();
​
  $(table.rows({selected: true, search: 'applied'}).data()).each(function () {
      //Index just to fill the array with a value
      selectedRowIds.push($(this)[1]);
    });
  
    //Only 100 rows with "selected" class are getting grabbed here
    console.log(selectedRowIds.length);
    console.log(selectedRowIds);
});
​
$(document).ready(function() {
        var data = [];
        for ( var i=0 ; i<5000; i++ ) {
            data.push( [ '', i, i, i, i, i ] );
        }
         
        $('#example').DataTable( {
            columnDefs: [
            {
              targets: 0,
              orderable: true,
              className: 'select-checkbox'
            }],
            data:           data,
            deferRender:    true,
            scrollY:        400,
            scrollCollapse: true,
            scroller:       true,
            select:{
                style: 'multi',
                selector: 'td:first-child'
            }
        });
    } );
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers