Row Group Pagination

by Robert Rutenge

HTML

<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Club</th>
                <th>Position</th>
                <th>Value</th>
                 <th>Points</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
             
                <th>Name</th>
                <th>Club</th>
                <th>Position</th>
                <th>Value</th>
                 <th>Points</th>
            </tr>
        </tfoot>
 
        <tbody>
            <tr>
                <td>Mignolet</td>
                <td>Liverpool</td>
                <td>Goalkeepers</td>
                <td>6.4</td>
                <td>120</td>
            </tr>
            <tr>
                <td>Adrián</td>
                <td>West Ham</td>
                <td>Goalkeepers</td>
                <td>6.7</td>
                <td>87</td>
              
            </tr>
            <tr>
                <td>Hart</td>
                <td>Manchester City</td>
                <td>Goalkeepers</td>
                <td>6.7</td>
                <td>111</td>
              
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
               
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
               
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
             ...

CSS

tr.group,
tr.group:hover {
    background-color: #ddd !important;
}

JavaScript

var table = $('#example').DataTable({
        "columnDefs": [
            { "visible": false, "targets": 2 }
        ],
        "order": [[ 2, 'asc' ]],
        "displayLength": 25,
        "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null;
 
            api.column(2, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td colspan="5">'+group+'</td></tr>'
                    );
 
                    last = group;
                }
            } );
        }
    } );
 
    // Order by the grouping
    $('#example tbody').on( 'click', 'tr.group', function () {
        var currentOrder = table.order()[0];
        if ( currentOrder[0] === 2 && currentOrder[1] === 'asc' ) {
            table.order( [ 2, 'desc' ] ).draw();
        }
        else {
            table.order( [ 2, 'asc' ] ).draw();
        }
    } );