DataTables + Bootstrap + FixedHeader

HTML

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script src="//cdn.datatables.net/plug-ins/e9421181788/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/e9421181788/integration/bootstrap/3/dataTables.bootstrap.css">
<script src="//cdn.datatables.net/fixedheader/2.1.1/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/fixedheader/2.1.1/css/dataTables.fixedHeader.css">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th colspan=3></th>
            <th colspan=3>234</th>
        </tr>
        <tr>
            <th>Make me </th>
            <th>colspan</th>
            <th>=3</th>
            <th>
                <p class="rotatehead">Hazmat</p>
            </th>
            <th>
                <p class="rotatehead">Out of Area</p>
            </th>
            <th>
                <p class="rotatehead">Lite</p>
            </th>
        </tr>
        <tr>
            <th colspan=3>RACK</th>
            <th>
                <div contenteditable>234</div>
            </th>
            <th>
                <div contenteditable>234</div>
            </th>
            <th>
                <div contenteditable>234</div>
            </th>
        </tr>
        <tr>
            <th colspan=3>TOTAL</th>
            <th>
                <div contenteditable>234</div>
            </th>
            <th>
                <div contenteditable>234</div>
            </th>
            <th>
                <div contenteditable>345</div>
            </th>
        </tr>
    </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
     ...

CSS

body {
    font-size: 140%;
    padding: 1em;
}
div.FixedHeader_Cloned table {
    margin: 0 !important
}

JavaScript

$(document).ready(function () {
    var table = $('#example').DataTable({
        "bSort": false,
            "paginate": false
    });

    new $.fn.dataTable.FixedHeader(table, {
        "left": true
    });


    $('.filterName').on('click', function (e) {
        e.preventDefault();

        var filterValue = $(this).data('filter');

        table.column(0).data().search(filterValue).draw();
    });

});