"Bootstrap table with individual column filters + Fixed header scrolling"
Bootstrap 3.3.0 Snippet by napsterbd

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link media="all" type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/floatthead/1.2.13/jquery.floatThead.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<h5>Inspired by snippet <a href="http://bootsnipp.com/snippets/featured/panel-table-with-filters-per-column" target="_blank">Panel table with filters (per column)</a></h5>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary filterable">
<div class="table-responsive">
<table id="mytable" class="table table-striped">
<thead>
<tr class="filters">
<th><input type="text" class="form-control" placeholder="First-Name" disabled></th>
<th><input type="text" class="form-control" placeholder="Last-Name" disabled></th>
<th><input type="text" class="form-control" placeholder="Email" disabled></th>
<th><input type="text" class="form-control" placeholder="State" disabled></th>
<th><button class="btn btn-primary btn-xs btn-filter">Filter</button> <button class="btn btn-primary btn-xs btn-reset">Reset</button></th>
</tr>
</thead>
<tbody>
<tr>
<td>Jack</td>
<td>Daniels</td>
<td>jack.daniels@example.com</td>
<td>Virginia</td>
<td></td>
</tr>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
body { width:100%; }
.floatThead-floatContainer { left: inherit !important; }
.table td:last-child { text-align:center; }
.filters { background-color: orange; }
.filterable { margin-top: 15px; }
.filterable .panel-heading .pull-right { margin-top: -20px; }
.filterable .filters input[disabled] { background-color: transparent; border: none; cursor: auto; box-shadow: none; padding: 0; height: auto; }
.filterable .filters input[disabled]::-webkit-input-placeholder { color: #333; }
.filterable .filters input[disabled]::-moz-placeholder { color: #333; }
.filterable .filters input[disabled]:-ms-input-placeholder { color: #333; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function() {
$("[data-toggle=tooltip]").tooltip();
$('#mytable').floatThead({ useAbsolutePositioning: false });
$('.filterable .btn-filter').click(function(){
var $panel = $(this).parents('.filterable'),
$filters = $panel.find('.filters input'),
$tbody = $panel.find('.table tbody');
if ($filters.prop('disabled') == true) {
$filters.prop('disabled', false);
$filters.first().focus();
} else {
$filters.val('').prop('disabled', true);
$filters.first().focus();
//$tbody.find('.no-result').remove();
//$tbody.find('tr').show();
}
});
$('.filterable .btn-reset').click(function(){
var $panel = $(this).parents('.filterable'),
$filters = $panel.find('.filters input'),
$tbody = $panel.find('.table tbody');
$filters.val('').prop('disabled', true);
$tbody.find('.no-result').remove();
$tbody.find('tr').show();
});
$('.filterable .filters input').keyup(function(e){
/* Ignore tab key */
var code = e.keyCode || e.which;
if (code == '9') return;
/* Useful DOM data and selectors */
var $input = $(this),
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Pro
Bootstrap Tabs with Table
Creative Princing Table
BS4 Simple & Clean Pricing table

Questions / Comments: