bootstrap: unicorn tables

by secretgspot

HTML

<link rel="stylesheet" href="http://wbpreview.com/previews/WB0F35928/css/bootstrap.min.css">
<link rel="stylesheet" href="http://wbpreview.com/previews/WB0F35928/css/bootstrap-responsive.min.css">
<script src="http://wbpreview.com/previews/WB0F35928/js/jquery.dataTables.min.js"></script>
        <div id="content">
            <div id="content-header">
                <h1>Tables</h1>
            </div>
            <div id="breadcrumb">
                <a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> Home</a>
                <a href="#" class="current">Tables</a>
            </div>
            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="span12">
                        <div class="widget-box">
                            <div class="widget-title">
                                <span class="icon">
                                    <i class="icon-th"></i>
                                </span>
                                <h5>Static table</h5>
                            </div>
                            <div class="widget-content nopadding">
                                <table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Column name</th>
                                            <th>Column name</th>
                                            <th>Column name</th>
                                            <th>Column name</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Row 1</td>
                                            <td>Row 2</td>
                                            <td>Row 3</td>
                                            <td>Row 4</td>
...

CSS

/* Content */
#content {
    background: none repeat scroll 0 0 #eeeeee;
    margin-left: 0px;
    margin-right: 0;
    padding-bottom: 25px;
    position: relative;
    min-height: 500px;
    width: auto;
    border-top-left-radius: 8px;
}

#content-header {
    background-image: linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);
    height: 80px;
    position: abslute;
    width: 100%;
    z-index: 20;
}

#content-header h1 {
    color: #555555;
    font-size: 28px;
    font-weight: normal;
    float: left;
    text-shadow: 0 1px 0 #ffffff;
    margin-left: 20px;
    position: absolute;
}

#content-header h1, #content-header .btn-group {
    margin-top: 20px;
}
#content-header .btn-group .btn {
    padding: 11px 14px 9px;
}
#content-header .btn-group .btn .label {
    position: absolute;
    top: -7px;
}

.container-fluid .row-fluid:first-child {
    margin-top: 20px;
}
/* Breadcrumb */
#breadcrumb {
    background-color: #e5e5e5;
    box-shadow: 0 0 1px #ffffff;
    border-top: 1px solid #d6d6d6;
    border-bottom: 1px solid #d6d6d6;
    padding-left: 10px;
}
#breadcrumb a {
    padding: 8px 20px 8px 10px;
    display: inline-block;
    background-image: url('../img/breadcrumb.png');
    background-position: center right;
    background-repeat: no-repeat;
    font-size: 11px;
    color: #666666;
}
#breadcrumb a:hover {
    color: #333333;
}
#breadcrumb a:last-child {
    background-image:none;
}
#breadcrumb a.current {
    font-weight: bold;
    color: #444444;
}
#breadcrumb a i {
    margin-right: 5px;
    opacity: .6;
}
#breadcrumb a:hover i {
    margin-right: 5px;
    opacity: .8;
}

/* Footer */
#footer {
    text-align: center;
    color: #777777;
}


.quick-actions i.icon-book {
    background-image: url('../img/icons/32/book.png');
}
.quick-actions i.icon-cabinet {
    background-image: url('../img/icons/32/cabinet.png');
}
.quick-actions i.icon-calendar {
    background-image: url('../img/icons/32/calendar.png');
}
.quick-actions i.icon-client {
   ...

JavaScript

$('.data-table').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "sDom": '<""l>t<"F"fp>'
});

$('input[type=checkbox],input[type=radio],input[type=file]').uniform();

$('select').select2();

$("span.icon input:checkbox, th input:checkbox").click(function() {
    var checkedStatus = this.checked;
    var checkbox = $(this).parents('.widget-box').find('tr td:first-child input:checkbox');
    checkbox.each(function() {
        this.checked = checkedStatus;
        if (checkedStatus == this.checked) {
            $(this).closest('.checker > span').removeClass('checked');
        }
        if (this.checked) {
            $(this).closest('.checker > span').addClass('checked');
        }
    });
});