DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.0.0/css/rowGroup.dataTables.min.css">
<script src="https://cdn.datatables.net/rowgroup/1.0.0/js/dataTables.rowGroup.min.js"></script>
<table id="example">
        <thead>
            <tr>
                <th>Name</th>
                <th>type</th>
                <th>age</th>
                
            </tr>
        </thead>
 
        <tbody id="sortable">
<tr id="1">
    <td>Name</td>
    <td>Type1</td>
    <td>Age</td>
</tr>        
<tr id="2">
    <td>Name</td>
    <td>Type1</td>
    <td>Age</td>
</tr>        
<tr id="3">
    <td>Name</td>
    <td>Type2</td>
    <td>Age</td>
</tr>        
<tr id="4">
    <td>Name</td>
    <td>Type2</td>
    <td>Age</td>
</tr>        


        </tbody>
    </table>

JavaScript

var table = $('#example').DataTable({
"searching": false,
            "paging": false,
            "info": false,
            "order": [[0, "asc"]],
            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="groups"><td class="tdgroups" colspan="22" style="Cursor:hand !important;BACKGROUND-COLOR:rgb(237, 208, 0);font-weight:700;color:#006232;">' + '- BRAND NAME: ' + group + '</td></tr>'
                        );
                        last = group;
                    }
                });
            }
});

$("#sortable").sortable();
$("#sortable").disableSelection();