DataTables

by Kabir Hossain

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/t/dt/dt-1.10.11,r-2.0.2/datatables.min.css">
<script src="https://cdn.datatables.net/t/dt/dt-1.10.11,r-2.0.2/datatables.min.js"></script>
<div style="width:400px">
<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>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <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>Bradley Greer</td>
      <td>Software Engineer</td>
      <td>London</td>
      <td>41</td>
      <td>2012/10/13</td>
      <td>$132,000</td>
    </tr>
    <tr>
      <td>Dai Rios</td>
      <td>Personnel Lead</td>
      <td>Edinburgh</td>
      <td>35</td>
      <td>2012/09/26</td>
      <td>$217,500</td>
    </tr>
    <tr>
      <td>Jenette Caldwell</td>
      <td>Development Lead</td>
      <td>New York</td>
      <td>30</td>
      <td>2011/09/03</td>
      <td>$345,000</td>
    </tr>
    <tr>
      <td>Yuri Berry</td>
      <td>Chief Marketing Officer (CMO)</td>
      <td>New York</td>
      <td>40</td>
      <td>2009/06/25</td>
      <td>$675,000</td>
    </tr>
    <tr>
      <td>Caesar Vance</td>
      <td>Pre-Sales Support</td>
      <td>New York</td>
      <td>21</td>
      <td>2011/12/12</td>
     ...

CSS

table.dataTable.dtr-inline.collapsed > tbody > tr.group > td:first-child::before, 
table.dataTable.dtr-inline.collapsed > tbody > tr.group > th:first-child::before {
  display:none;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.group > td:first-child, 
table.dataTable.dtr-inline.collapsed > tbody > tr.group > th:first-child {
  padding-left:5px;
}

JavaScript

$(document).ready(function (){
    var table = $('#example').DataTable({
        responsive: true,
        drawCallback: function (settings) {
           var api = this.api();
           var rows = api.rows({ page: 'current' }).nodes();
           var last = null;

           api.column(1, { page: 'current' }).data().each(function (group, i) {
                if (last !== group) {
                    $(rows).eq(i).before(
                        '<tr class="group"><td colspan="6" style="BACKGROUND-COLOR:rgb(212, 212, 212);font-weight:700;color:#1F1F1F;">' + 'Alarme du ' + group  + '</td></tr>'
                    );

                    last = group;
                }
           });
        }
   });
});