"Bootstrap Search Table"
Bootstrap 4.1.1 Snippet by kshiti06

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/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container search-table">
<div class="search-box">
<div class="row">
<div class="col-md-3">
<h5>Search All Fields</h5>
</div>
<div class="col-md-9">
<input type="text" id="myInput" onkeyup="myFunction()" class="form-control" placeholder="Search all fields e.g. HTML">
<script>
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</div>
</div>
</div>
<div class="search-list">
<h3>303 Records Found</h3>
<table class="table" id="myTable">
<thead>
<tr>
<th>Title</th>
<th>Category</th>
</tr>
</thead>
<tbody>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.search-table{
padding: 10%;
margin-top: -6%;
}
.search-box{
background: #c1c1c1;
border: 1px solid #ababab;
padding: 3%;
}
.search-box input:focus{
box-shadow:none;
border:2px solid #eeeeee;
}
.search-list{
background: #fff;
border: 1px solid #ababab;
border-top: none;
}
.search-list h3{
background: #eee;
padding: 3%;
margin-bottom: 0%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Works like a charm, thank you very much.

MrEdinLaw () - 5 years ago - Reply 0