1.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Data Table with Filter Row Feature</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-6"><h2>Manage <b>Domains</b> Website</h2></div>
<div class="col-sm-6">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-info active">
<input type="radio" name="status" value="all" checked="checked"> All
</label>
<label class="btn btn-success">
<input type="radio" name="status" value="active"> Active
</label>
<label class="btn btn-warning">
<input type="radio" name="status" value="inactive"> Inactive
</label>
<label class="btn btn-danger">
<input type="radio" name="status" value="expired"> Expired
</label>
</div>
</div>
</div>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Domain</th>
<th>Created On</th>
<th>Status</th>
<th>Server Location</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr data-status="active">
<td>1</td>
<td><a href="soengsouy.com">soengsouy.com</a></td>
<td>04/10/2019</td>
<td><span class="label label-success">Active</span></td>
<td>Khmer</td>
<td><a href="soengsouy.com" class="btn btn-sm manage">Manage</a></td>
</tr>
<tr data-status="inactive">
<td>2</td>
<td><a href="soengsouy.com">soengsouy.net</a></td>
<td>05/08/2018</td>
<td><span class="label label-warning">Inactive</span></td>
<td>Pursat</td>
<td><a href="#" class="btn btn-sm manage">Manage</a></td>
</tr>
<tr data-status="active">
<td>3</td>
<td><a href="soengsouy.com">webdesign.com</a></td>
<td>11/05/2020</td>
<td><span class="label label-success">Active</span></td>
<td>United Kingdom</td>
<td><a href="#" class="btn btn-sm manage">Manage</a></td>
</tr>
<tr data-status="expired">
<td>4</td>
<td><a href="soengsouy.com">soengsouy.org</a></td>
<td>06/09/2019</td>
<td><span class="label label-danger">Expired</span></td>
<td>USA</td>
<td><a href="#" class="btn btn-sm manage">Manage</a></td>
</tr>
<tr data-status="inactive">
<td>5</td>
<td><a href="soengsouy.com">khmer.com</a></td>
<td>12/08/2020</td>
<td><span class="label label-warning">Inactive</span></td>
<td>Cambodai</td>
<td><a href="#" class="btn btn-sm manage">Manage</a></td>
</tr>
</tbody>
</table>
</div>
<script src="javascript.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Data Table with Filter Row Feature</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-6"><h2>Manage <b>Domains</b> Website</h2></div>
<div class="col-sm-6">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-info active">
<input type="radio" name="status" value="all" checked="checked"> All
</label>
<label class="btn btn-success">
<input type="radio" name="status" value="active"> Active
</label>
<label class="btn btn-warning">
<input type="radio" name="status" value="inactive"> Inactive
</label>
<label class="btn btn-danger">
<input type="radio" name="status" value="expired"> Expired
</label>
</div>
</div>
</div>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Domain</th>
<th>Created On</th>
<th>Status</th>
<th>Server Location</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr data-status="active">
<td>1</td>
<td><a href="soengsouy.com">soengsouy.com</a></td>
<td>04/10/2019</td>
<td><span class="label label-success">Active</span></td>
<td>Khmer</td>
<td><a href="soengsouy.com" class="btn btn-sm manage">Manage</a></td>
</tr>
<tr data-status="inactive">
<td>2</td>
<td><a href="soengsouy.com">soengsouy.net</a></td>
<td>05/08/2018</td>
<td><span class="label label-warning">Inactive</span></td>
<td>Pursat</td>
<td><a href="#" class="btn btn-sm manage">Manage</a></td>
</tr>
<tr data-status="active">
<td>3</td>
<td><a href="soengsouy.com">webdesign.com</a></td>
<td>11/05/2020</td>
<td><span class="label label-success">Active</span></td>
<td>United Kingdom</td>
<td><a href="#" class="btn btn-sm manage">Manage</a></td>
</tr>
<tr data-status="expired">
<td>4</td>
<td><a href="soengsouy.com">soengsouy.org</a></td>
<td>06/09/2019</td>
<td><span class="label label-danger">Expired</span></td>
<td>USA</td>
<td><a href="#" class="btn btn-sm manage">Manage</a></td>
</tr>
<tr data-status="inactive">
<td>5</td>
<td><a href="soengsouy.com">khmer.com</a></td>
<td>12/08/2020</td>
<td><span class="label label-warning">Inactive</span></td>
<td>Cambodai</td>
<td><a href="#" class="btn btn-sm manage">Manage</a></td>
</tr>
</tbody>
</table>
</div>
<script src="javascript.js"></script>
</body>
</html>
|
2.styles.css
body {
color: #566787;
background: #d3c6c6;
font-family: Arial, Helvetica, sans-serif;
}
.table-wrapper {
width: 850px;
background: #fff;
padding: 20px 30px 5px;
margin: 30px auto;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.7);
}
.table-wrapper .btn-group {
float: right;
}
.table-title .btn {
min-width: 50px;
border-radius: 1px;
border: none;
padding: 6px 12px;
font-size: 95%;
outline: none !important;
height: 30px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.7);
}
.table-title {
border-bottom: 1px solid #e9e9e9;
padding-bottom: 15px;
background: rgb(0, 50, 74);
margin: -20px -31px 10px;
padding: 15px 30px;
color: #fff;
}
.table-title h2 {
margin: 2px 0 0;
font-size: 24px;
}
table.table tr th, table.table tr td {
border-color: #e9e9e9;
padding: 12px 15px;
vertical-align: middle;
}
table.table tr th:first-child {
width: 40px;
}
table.table tr th:last-child {
width: 100px;
}
table.table-striped tbody tr:nth-last-of-type(odd) {
background-color: #fcfcfc;
}
table.table-striped.table-hover tbody tr:hover {
background: #f5f5f5;
}
table.table td a {
color: #2196f3;
}
table.table td .btn.manage {
padding: 2px 10px;
background: #37BC98;
color: #fff;
border-radius: 1px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.7);
}
table.table td .btn.manage:hover {
background: #2e9c81;
}
body {
color: #566787;
background: #d3c6c6;
font-family: Arial, Helvetica, sans-serif;
}
.table-wrapper {
width: 850px;
background: #fff;
padding: 20px 30px 5px;
margin: 30px auto;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.7);
}
.table-wrapper .btn-group {
float: right;
}
.table-title .btn {
min-width: 50px;
border-radius: 1px;
border: none;
padding: 6px 12px;
font-size: 95%;
outline: none !important;
height: 30px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.7);
}
.table-title {
border-bottom: 1px solid #e9e9e9;
padding-bottom: 15px;
background: rgb(0, 50, 74);
margin: -20px -31px 10px;
padding: 15px 30px;
color: #fff;
}
.table-title h2 {
margin: 2px 0 0;
font-size: 24px;
}
table.table tr th, table.table tr td {
border-color: #e9e9e9;
padding: 12px 15px;
vertical-align: middle;
}
table.table tr th:first-child {
width: 40px;
}
table.table tr th:last-child {
width: 100px;
}
table.table-striped tbody tr:nth-last-of-type(odd) {
background-color: #fcfcfc;
}
table.table-striped.table-hover tbody tr:hover {
background: #f5f5f5;
}
table.table td a {
color: #2196f3;
}
table.table td .btn.manage {
padding: 2px 10px;
background: #37BC98;
color: #fff;
border-radius: 1px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.7);
}
table.table td .btn.manage:hover {
background: #2e9c81;
}
|
3.javascript
$(document).ready(function()
{
$(".btn-group .btn").click(function()
{
var inputValue = $(this).find("input").val();
if(inputValue != 'all')
{
var target = $('table tr[data-status="' + inputValue + '"]');
$("table tbody tr").not(target).hide();
target.fadeIn();
}
else
{
$("table tbody tr").fadeIn();
}
});
// Changeing the class of status label to support bootstrap 4
var bs = $.fn.tooltip.Constructor.VERSION;
var support = bs.split(".");
if(str[0] == 4)
{
$(".label").each(function()
{
var classStr = $(this).attr("class");
var newClassStr = classStr.replace(/label/g, "badge");
$(this).removeAttr("class").addClass(newClassStr);
});
}
});
$(document).ready(function()
{
$(".btn-group .btn").click(function()
{
var inputValue = $(this).find("input").val();
if(inputValue != 'all')
{
var target = $('table tr[data-status="' + inputValue + '"]');
$("table tbody tr").not(target).hide();
target.fadeIn();
}
else
{
$("table tbody tr").fadeIn();
}
});
// Changeing the class of status label to support bootstrap 4
var bs = $.fn.tooltip.Constructor.VERSION;
var support = bs.split(".");
if(str[0] == 4)
{
$(".label").each(function()
{
var classStr = $(this).attr("class");
var newClassStr = classStr.replace(/label/g, "badge");
$(this).removeAttr("class").addClass(newClassStr);
});
}
});
|
0 Comments
CAN FEEDBACK
Emoji