"Roster Example"
Bootstrap 3.3.0 Snippet by paananen

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">
<br /><br />
<div class="col-lg-4">
<a href="#" class="btn btn-sm btn-primary" id="showNames">Show Full Names</a>
<a href="#" class="btn btn-sm btn-danger" id="hideNames">Hide Full Names</a>
</div>
<div class="col-lg-4">
<input type="search" id="search" name="search" value="" class="form-control" placeholder="Search">
</div>
<br /><br />
</div>
<div class="row">
<div class="col-lg-12">
<table class="table table-bordered" id="roster-table">
<thead>
<tr class="bg-primary">
<th style="width: 180px; text-align: left;">Location</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
</tr>
</thead>
<tbody class="context">
<tr>
<td class="info" style="text-align: left;">Mater Brisbane (MMB)</td>
<td>
<span data-toggle="tooltip" data-placement="right" title="Robert Clarke" class="initials">RC </span>
<span class="hidden fullName">Robert Clarke</span>
</td>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
td, th {
text-align: center;
}
mark{
background: orange;
color: black;
padding: 0;
}
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
//--> jquery-searchable setup
$(function () {
$( '#roster-table' ).searchable({
striped : true,
oddRow : { 'background-color': '#f5f5f5' },
evenRow : { 'background-color': '#fff' }
});
});
//--> show\hide full names
$(document).ready(function(){
$('#hideNames').hide();
$('#showNames').click(function(){
$('#showNames').hide();
$('#hideNames').show();
$('.fullName').removeClass('hidden');
$('.initials').addClass('hidden');
});
$('#hideNames').click(function(){
$('#hideNames').hide();
$('#showNames').show();
$('.fullName').addClass('hidden');
$('.initials').removeClass('hidden');
});
$('[data-toggle="tooltip"]').tooltip();
});
//--> mark.js setup
$(function() {
var mark = function() {
var keyword = $("input[name='search']").val();
var options = {};
$("input[name='opt[]']").each(function() {
options[$(this).val()] = $(this).is(":checked");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Paper Dashboard

Questions / Comments: