DataTables - Bootstrap Compatibility

Working model of dataTables with Bootstrap styles and framework. Basic example.

by Doug Hill

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="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/colreorder/1.1.2/css/dataTables.colReorder.css">
<script src="//cdn.datatables.net/colreorder/1.1.2/js/dataTables.colReorder.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.1/css/dataTables.responsive.css">
<script src="//cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <table id="ex-datatables-basic" class="table table-striped table-hover table-condensed">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Agt FN</th>
                        <th>Agt LN</th>
                        <th>ATTUID</th>
                        <th>Call eDT</th>
                        <th>Call eTM</th>
                        <th>Acct No.</th>
                        <th>City</th>
                        <th>Customer</th>
                        <th>State</th>
                        <th>Hold Time</th>
                        <th>Xfer</th>
                        <th>Xfer Agt</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>ID</th>
                        <th>Agt FN</th>
                        <th>Agt LN</th>
                        <th>ATTUID</th>
                        <th>Call eDT</th>
                        <th>Call eTM</th>
                        <th>Acct No.</th>
                       ...

JavaScript

//  TEST BASIC INITIALIZATION - BASIC DATATABLE


$(document).ready( function () {
    var table = $('#ex-datatables-basic').DataTable();
    new $.fn.dataTable.ColReorder( table );
} );