DataTables

Testing DataTables JS Library

by Ashiqur Rahman

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.1/js/dataTables.buttons.min.js"></script>
<h3>
Selected items
</h3>
<table id="selected" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
</table>
<hr />
<h3>
This is the data source containing the whole list
</h3>
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <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>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <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>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>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
     ...

CSS

.alphabetic_filter span {
  cursor: pointer;
  padding: 5px;
  display: inline-block;
}

.alphabetic_filter span:hover,
.alphabetic_filter span.active {
  background: #202020;
  color: #FAFAFA;
}

JavaScript

$(document).ready(function() {
  var selected_table = $('#selected').DataTable({
    "order": [
      [0, "asc"]
    ],
    "pagingType": "simple",
    select: true
  });


  var data_table = $('#example').DataTable({
    "order": [
      [0, "asc"]
    ],
    "pagingType": "simple",
    select: true
  });

  data_table.on('select', function(e, dt, node, config) {
    var rows = dt.rows({
      selected: true
    });
    var row_nodes = rows.nodes();
    rows.remove().draw();
    selected_table.rows.add(row_nodes).deselect().draw();
  });

  selected_table.on('select', function(e, dt, node, config) {
    var rows = dt.rows({
      selected: true
    });
    var row_nodes = rows.nodes();
    rows.remove().draw();
    data_table.rows.add(row_nodes).deselect().draw();
  });

  $('td.alphabetic_filter span').on('click', function(e) {
    var id = $(this).attr('id');
    var text = $(this).text();
    var search_regex = '';
    if (id == 'clear_filter') {
      $('td.alphabetic_filter span').removeClass('active');
      text = '';
    } else {
      $('td.alphabetic_filter span').removeClass('active');
      $(this).addClass('active');
      search_regex = "^[" + text + "]";
    }

    $('#example').DataTable().column(0).search(search_regex, 1, 0).draw();
  });
  
  $('#select_all').on('click', function(e) {
    e.preventDefault();
    var rows = data_table.$('tr', {"filter":"applied"}).addClass('row-selected');
    
    if(rows.length == 0) {
    	rows = data_table.$('tr').addClass('row-selected');
    }
    
    rows.each(function(){
    	data_table.row(this).select();
    });
  });
});