jQuery dataatable & bootstrap

jQuery dataatable & bootstrap

by seefeld

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"></script>
<div class="container">
    <div class="row-fluid">
        <div class="span12">
            <div class="left-pane-div">
                  
                <div class="well">
                    <table id="searchable" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>File</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><a href="#">QF01/01</a></td>
                                <td>Master List of Controlled Documents/Forms</td>
                            </tr>
                            <tr>
                                <td><a href="#">QF04/01</a></td>
                                <td>Calibration Register</td>
                            </tr>
                            <tr>
                                <td><a href="#">Hand Arm Vibration </a></td>
                                <td>Concession Form</td>
                            </tr>
                            <tr>
                                <td><a href="#">Assessment Of Employment Of Young Persons</a></td>
                                <td>Monthly Office Checklist </td>
                            </tr>
                            <tr>
                                <td><a href="#">orporate Marketing Material Approval Form</a></td>
                                <td>Hazard/Near Miss Reporting Card </td>
                            </tr>
                            <tr>
                               ...

CSS

/* Reset */
* { padding: 0px; margin: 0px; }
body { padding-top: 60px; padding-bottom: 40px; }
/* Container */
.container-fluid { }

/* LeftPane */
.left-pane-div { }
.left-pane-div #searchable { max-height: 500px; overflow-y: scroll; padding-right: 20px; }
.left-pane-div .well.white-well { background-color: #fff; }
.left-pane-div .well.white-well span { display: block; }
.left-pane-div .well.white-well span.phone { padding-top: 20px; }
.left-pane-div .well.white-well span > a { display: block; }
.left-pane-div .well.white-well:hover { border-color: rgba(82, 168, 236, 0.8); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6); outline: 0 none; cursor: pointer; }

/* SortableTable */
.dataTables_wrapper { display: block; margin: 5px 0px; padding: 10px 0px; overflow: auto; }
.dataTables_wrapper label { font-size: 12px; line-height: 12px; }
.dataTables_wrapper select { padding: 3px; line-height: 12px; margin: 0px 3px; width: 50px; }
.dataTables_wrapper input { width: 120px; }
.dataTables_length { float: left; }
.dataTables_filter { float: right; text-align: right; }
.dataTables_info { clear: both; float: left; line-height: 34px; }
.dataTables_paginate { float: right; text-align: right; }
/* Full number pagination */
.paging_full_numbers { }
#DataTables_Table_0_first { border-left-width: 1px; border-radius: 3px 0 0 3px; }
#DataTables_Table_0_last { border-radius: 0 3px 3px 0; }
.paging_full_numbers a:active { background-color: #F5F5F5; }
.paging_full_numbers a:hover { background-color: #F5F5F5; cursor: pointer; }
.paging_full_numbers a.paginate_button,
.paging_full_numbers a.paginate_active { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: #DDDDDD; border-image: none; border-style: solid; border-width: 1px 1px 1px 0; float: left; line-height: 34px; padding: 0 14px; text-decoration: none; margin-left: 0px; }
.paging_full_numbers a.paginate_button {...

JavaScript

$(document).ready( function(){
	
	// SortableTables
	$('.table').dataTable( {
        "sPaginationType": "full_numbers"
    });

	// Config
	var SearchBox = "#search-box";
	var SearchableElements = "#searchable tbody tr"
	var SearchResultCount =  "#filter-count";
	
    $(SearchResultCount).text($(SearchableElements).length);
	
	// SearchBox
	$(SearchBox).keyup(function(){
	
		$(SearchResultCount).text("Searching ...");
        var filter = $(this).val();
		var count = 0;
		
        $(SearchableElements).each(function(){
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).animate({
    					opacity: 0,
  					}, 100, function() {
    					$(this).css('overflow', 'hidden').hide();
  					});
            } else {
                $(this).animate({
    					opacity: 1,
						height: '100%',
  					}, 100, function() {
    					$(this).show();
  					});
                count++;
            }
        });
 
        var numberItems = count;
        $(SearchResultCount).text(count);
    });
	
	
	
	
	
});