Testing DataTables with Bootstrap

http://datatables.net/

by Akram kamal

HTML

<script src="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//appliedinter.net/Workstream/common_files/Workstream.css">
<script src="//datatables.net/media/blog/bootstrap/paging.js"></script>
<script src="//datatables.net/release-datatables/extras/TableTools/media/js/TableTools.js"></script>
<script src="//datatables.net/release-datatables/extras/TableTools/media/js/ZeroClipboard.js"></script>
<table class="table table-striped table-bordered table-condensed" id="task_list">
    <!--common_files/dsp_task_list_header.cfm Author: Jeromy F -->
    <thead>
        <tr>
            <th>Task <abbr title="Identifier">ID</abbr></th>
            <th class="hidden-phone hidden-tablet">Owner</th>
            <th>Task</th>
            <th class="hidden-phone hidden-tablet">Project <i class="icon-chevron-up"></i></th>
            <th class="hidden-phone">Priority</th>
            <th class="hidden-phone">Time</th>
            <th>Status</th>
            <th>Due</th>
        </tr>
    </thead>
    <!--common_files/dsp_task_list.cfm Author: Jeromy F -->
    <tbody>
        <tr>
            <td scope="row">340</td>
            <td class="hidden-phone hidden-tablet"><abbr title="French, Jeromy">Jeromy</abbr>
            </td>
            <td><a href="javascript:list_to_task('340');" title="View time details for Pitch Workstream to SSCI."><i class="icon_dollar hidden-phone" title="Ask Brigitte if she'd like to see a demo...."></i>Pitch Workstream to SSCI</a>
            </td>
            <td class="hidden-phone hidden-tablet">Business Development-Business Development</td>
            <td class="hidden-phone">Normal</td>
            <td class="hidden-phone"><a href="javascript:list_to_time('340');" title="View time details for Pitch Workstream to SSCI.">0/2 0%</a>
            </td>
            <td>
<span class="badge badge-warning" title="Due today"><i class="icon-white icon-bell"></i></span>&nbsp; New</td>
        ...

CSS

table.table thead .sorting, table.table thead .sorting_asc, table.table thead .sorting_desc {
    cursor: pointer;
    *cursor: hand;
}
table.table thead .sorting {
    background: url('http://www.datatables.net/media/blog/bootstrap_2/images/sort_both.png') no-repeat center right;
}
table.table thead .sorting_asc {
    background: url('http://www.datatables.net/media/blog/bootstrap_2/images/sort_asc.png') no-repeat center right;
}
table.table thead .sorting_desc {
    background: url('http://www.datatables.net/media/blog/bootstrap_2/images/sort_desc.png') no-repeat center right;
}
table.table thead .sorting_asc_disabled {
    background: url('http://www.datatables.net/media/blog/bootstrap_2/images/sort_asc_disabled.png') no-repeat center right;
}
table.table thead .sorting_desc_disabled {
    background: url('http://www.datatables.net/media/blog/bootstrap_2/images/sort_desc_disabled.png') no-repeat center right;
}

JavaScript

$(document).ready(function () {
    $('#browser_data, #task_list').dataTable({
        "bPaginate": false,
        "bAutoWidth": false,
        "bLengthChange": false,
        "sDom": "<'row-fluid'<'span6'f><'span6'<'pull-right'T>>r>t",
            "oTableTools": {
            "sSwfPath": "http://datatables.net/release-datatables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf"
        }
    });
    
    //apply some additional Bootstrap styling
    $('.dataTables_length select').addClass('span3');
    $('.dataTables_filter input').addClass('span9 search-query');
    $('.DTTT_container').addClass('btn-group');
    $('div.dataTables_paginate a, a.DTTT_button').addClass('btn btn-mini');
});