"Easy Table Filter"
Bootstrap 3.3.0 Snippet by rosslynhouse

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 ---------->
<div class="container">
<div class="row">
<h1>Pre-school Snack Menu</h1>
<div class="col-md-8 col-md-offset-2">
<div class="pull-right">
<div class="">
<button type="button" class="btn btn-primary outline btn-filter btn-all" data-target="all">All Weeks</button>
<button type="button" class="btn btn-primary outline btn-filter btn-wk1" data-target="1">Week 1</button>
<button type="button" class="btn btn-primary outline btn-filter btn-wk2" data-target="2">Week 2</button>
<button type="button" class="btn btn-primary outline btn-filter btn-wk3" data-target="3">Week 3</button>
<button type="button" class="btn btn-primary outline btn-filter btn-wk4" data-target="4">Week 4</button>
</div>
</div>
<div class="col-xs-12" style="height:30px;"></div>
<div class="table-container">
<table class="table tt_timetable">
<thead>
<tr class="row_gray" style="background-color: #f0f0f0 !important; display: true;">
<th style="background: #fff !important;"></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
</thead>
<tbody>
<tr class="week1" data-status="1">
<td class="wk_header">
<div>
Week 1
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
.tt_tabs .tt_timetable {
font-family: "Open Sans" !important;
}
table.tt_timetable {
margin-bottom: 0px;
}
table.tt_timetable {
width: 100%;
font-size: 11px;
color: #666;
margin-top: 30px;
border: 0;
font-family: arial;
letter-spacing: normal;
font-size: 11px;
line-height: normal;
font-family: 'Lato', Helvetica, Arial, sans-serif;
border-collapse: separate !important;
border-spacing: 2px !important;
background: #FFF !important;
}
.table>thead>tr>th {
vertical-align: bottom;
border: none;
}
.tt_timetable th {
width: 12.5%;
padding: 10px 15px 12px;
letter-spacing: normal;
text-align: center;
vertical-align: middle;
font-size: 14px;
font-weight: bold;
font-style: normal;
line-height: normal;
color: #34495E;
text-transform: none;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function () {
$('.star').on('click', function () {
$(this).toggleClass('star-checked');
});
$('.ckbox label').on('click', function () {
$(this).parents('tr').toggleClass('selected');
});
$('.btn-filter').on('click', function () {
var $target = $(this).data('target');
if ($target != 'all') {
$('.table tbody tr').css('display', 'none');
$('.table tbody tr[data-status="' + $target + '"]').fadeIn('slow');
} else {
$('.table tbody tr').css('display', 'none').fadeIn('slow');
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Navbar With Icons
Bootstrap Tabs with Table
Creative Princing Table
BS4 Simple & Clean Pricing table

Questions / Comments: