"Bootstrap Table Panel"
Bootstrap 3.3.0 Snippet by ipoelnet

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">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand">Bootstrap Table Panel</span>
</div>
<p class="navbar-text">With pagination, checkbox column, toggle-filtering and add/edit/delete row
placeholders.</p>
</div>
</nav>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default panel-table">
<div class="panel-heading">
<div class="row">
<div class="col col-xs-6">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="col col-xs-6 text-right">
<div class="pull-right">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success btn-filter active" data-target="completed">
<input type="radio" name="options" id="option1" autocomplete="off" checked>
Completed
</label>
<label class="btn btn-warning btn-filter" data-target="pending">
<input type="radio" name="options" id="option2" autocomplete="off"> Pending
</label>
<label class="btn btn-default btn-filter" data-target="all">
<input type="radio" name="options" id="option3" autocomplete="off"> All
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
.btn-group .btn {
transition: background-color .3s ease;
}
.panel-table .panel-body {
padding: 0;
}
.table > thead > tr > th {
border-bottom: none;
}
.panel-footer, .panel-table .panel-body .table-bordered {
border-style: none;
margin: 0;
}
.panel-table .panel-body .table-bordered > thead > tr > th:first-of-type {
text-align: center;
width: 50px;
}
.panel-table .panel-body .table-bordered > thead > tr > th.col-tools {
text-align: center;
width: 120px;
}
.panel-table .panel-body .table-bordered > thead > tr > th:last-of-type,
.panel-table .panel-body .table-bordered > tbody > tr > td:last-of-type {
border-right: 0;
}
.panel-table .panel-body .table-bordered > thead > tr > th:first-of-type,
.panel-table .panel-body .table-bordered > tbody > tr > td:first-of-type {
border-left: 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
$(document).ready(function () {
$('.btn-filter').on('click', function () {
var $target = $(this).data('target');
if ($target != 'all') {
$('.table tbody tr').css('display', 'none');
$('.table tr[data-status="' + $target + '"]').fadeIn('slow');
} else {
$('.table tbody tr').css('display', 'none').fadeIn('slow');
}
});
$('#checkall').on('click', function () {
if ($("#mytable #checkall").is(':checked')) {
$("#mytable input[type=checkbox]").each(function () {
$(this).prop("checked", true);
});
} else {
$("#mytable input[type=checkbox]").each(function () {
$(this).prop("checked", false);
});
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: