"Dynamic Table"
Bootstrap 3.3.0 Snippet by MikaCorp

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">
<h2>Dynamic Table</h2>
<div class="panel panel-primary">
<div class="panel-heading">
<h3>List of computer
<div class="pull-right">
<button id="btn-admin" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span> Edit</button>
</div>
</h3>
</div>
<div id="toolbar-admin" class="panel-body">
<div class="btn-toolbar" role="toolbar" aria-label="admin">
<div class="btn-group pull-right" role="group">
<button id="btn-online" class="btn btn-success">Online</button>
<button id="btn-offline" class="btn btn-warning">Offline</button>
<button id="btn-out-of-order" class="btn btn-danger">Out Of Order</button>
</div>
</div>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th class="col-check"></th>
<th>Id</th>
<th>Hostname</th>
<th>IP</th>
<th>MAC</th>
<th>Status</th>
<th>Description</th>
</tr>
</thead>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
h3{
margin:5px;
padding: 5px;
}
.btn-custom{
border: none;
}
#toolbar-admin{
display: none;
}
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
$(function() {
$('.col-check').hide();
$('#btn-admin').on('click', function(){
if($("#toolbar-admin").is(":visible"))
{
$("#toolbar-admin").hide();
$(".col-check").hide();
}
else
{
$("#toolbar-admin").show();
$(".col-check").show();
}
});
$('#btn-online').on('click', function(){
$('table tr').filter(':has(:checkbox:checked)').find('td').parent().removeClass().addClass('success');
$('table tr').filter(':has(:checkbox:checked)').find('td.status').text('Online');
});
$('#btn-offline').on('click', function(){
$('table tr').filter(':has(:checkbox:checked)').find('td').parent().removeClass().addClass('warning');
$('table tr').filter(':has(:checkbox:checked)').find('td.status').text('Offline');
});
$('#btn-out-of-order').on('click', function(){
$('table tr').filter(':has(:checkbox:checked)').find('td').parent().removeClass().addClass('danger');
$('table tr').filter(':has(:checkbox:checked)').find('td.status').text('Out Of Order');
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: