Bootstrap Data Tables 2

by Jon Eyrick

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//datatables.net/release-datatables/extensions/Scroller/css/dataTables.scroller.css">
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/be7019ee387/integration/bootstrap/3/dataTables.bootstrap.css">
<script src="//cdn.datatables.net/plug-ins/be7019ee387/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="//jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/js/jquery.dataTables.rowGrouping.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>First name</th>
            <th>Last name</th>
            <th>ZIP / Post code</th>
            <th>Country</th>
        </tr>
    </thead>
</table>

CSS

.collapsed-group {
    background: url("http://inknows.com/lib/datatables/bplus.png") no-repeat scroll left center transparent;
    padding-left:24px !important;
    padding-top:2px;
    margin-left:3px;
}
.expanded-group {
    background: url("http://inknows.com/lib/datatables/bminus.png") no-repeat scroll left center transparent;
    padding-left: 24px !important;
    padding-top:2px;
    margin-left:3px;
}

JavaScript

$(document).ready(function () {
    //$('.cimg').css('display','inline-block');
    //$('figcaption').css('display','inline-block');
    $('#example').dataTable({
        serverSide: true,
        ordering: false,
        searching: false,
        bLengthChange: false,
        //bPaginate: false,
        ajax: function (data, callback, settings) {
            var out = [];
            var x = 0,
                y = 0;
            var name = '';
            for (var i = data.start, ien = data.start + data.length; i < ien; i++) {
                if (++y > 3) {
                    ++x;
                    y = 0;
                }
                name = 'Company ' + x;
                out.push([name, i + '-2', i + '-3', i + '-4', i + '-5']);
            }

            callback({
                draw: data.draw,
                data: out,
                recordsTotal: 5000000,
                recordsFiltered: 5000000
            });
        },
        //"deferRender": true,
        //"order": [[ 2, "desc" ]],
        //"pagingType": "simple_numbers",
        //"scrollCollapse": true,
        "dom": "rtiS",
            "scrollY": "400px",
        scroller: {
            loadingIndicator: true
        }
        //"dom": '<"top"i>rt<"bottom"lp><"clear">'
    }).rowGrouping({
        bExpandableGrouping: true,
        iExpandGroupOffset: -1,
        asExpandedGroups: ["Company 0"]
    });
});