"Panel Tables with Filter"
Bootstrap 3.1.0 Snippet by robm

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="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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">
<h1>Click the filter icon <small>(<i class="glyphicon glyphicon-filter"></i>)</small></h1>
<div class="row">
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Developers</h3>
<div class="pull-right">
<span class="clickable filter" data-toggle="tooltip" title="Toggle table filter" data-container="body">
<i class="glyphicon glyphicon-filter"></i>
</span>
</div>
</div>
<div class="panel-body">
<input type="text" class="form-control" id="dev-table-filter" data-action="filter" data-filters="#dev-table" placeholder="Filter Developers" />
</div>
<table class="table table-hover" id="dev-table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Kilgore</td>
<td>Trout</td>
<td>kilgore</td>
</tr>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.row{
margin-top:40px;
padding: 0 10px;
}
.clickable{
cursor: pointer;
}
.panel-heading div {
margin-top: -18px;
font-size: 15px;
}
.panel-heading div span{
margin-left:5px;
}
.panel-body{
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
30
31
32
33
34
35
36
37
/**
* I don't recommend using this plugin on large tables, I just wrote it to make the demo useable. It will work fine for smaller tables
* but will likely encounter performance issues on larger tables.
*
* <input type="text" class="form-control" id="dev-table-filter" data-action="filter" data-filters="#dev-table" placeholder="Filter Developers" />
* $(input-element).filterTable()
*
* The important attributes are 'data-action="filter"' and 'data-filters="#table-selector"'
*/
(function(){
'use strict';
var $ = jQuery;
$.fn.extend({
filterTable: function(){
return this.each(function(){
$(this).on('keyup', function(e){
$('.filterTable_no_results').remove();
var $this = $(this),
search = $this.val().toLowerCase(),
target = $this.attr('data-filters'),
$target = $(target),
$rows = $target.find('tbody tr');
if(search == '') {
$rows.show();
} else {
$rows.each(function(){
var $this = $(this);
$this.text().toLowerCase().indexOf(search) === -1 ? $this.hide() : $this.show();
})
if($target.find('tbody tr:visible').size() === 0) {
var col_count = $target.find('tr').first().find('td').size();
var no_results = $('<tr class="filterTable_no_results"><td colspan="'+col_count+'">No results found</td></tr>')
$target.find('tbody').append(no_results);
}
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard PRO
Dynamic Sortable Tables
Filter elements, sidebar filter panel bootstrap 4
animated sinin and signup panel. animated login and registeration page, popup,

Questions / Comments:

dear i am beggner tell me how to connect css,js in html then work codes properly

Ímräñ ßúzdár () - 8 years ago - Reply 0

Can this work on a table with 10,000 rows?

Will () - 8 years ago - Reply 0

If you loaded all 10,000 rows onto one page i'm sure it would

DK () - 8 years ago - Reply 0

Has anyone made it work with pagination?

John Mark Acuesta () - 8 years ago - Reply 0

where i have to put de javascript??????

sfsdsd () - 9 years ago - Reply 0

in html.

ghost () - 9 years ago - Reply 0

I made it work by adding another container div ontop on the one already provided. Smh. it is still delayed though.

aKewl () - 10 years ago - Reply 0

of*

aKewl () - 10 years ago - Reply 0

It works better if after you wrap it in another container div, you then make the slideToggle(1); so the toggle works now. and it's faster :D

aKewl () - 10 years ago - Reply 0

This is awesome!

Noah Albers () - 10 years ago - Reply 0

For me on mouse up, the filter show and hide right away

Matt () - 10 years ago - Reply 0

Line 47 of JS - replace .slideToggle() with .slideDown("slow"). It's a hack fix and doesn't allow you to slide it back up... but it works for me.

Mark Evans () - 10 years ago - Reply 0

is an excellent script for filtering. To be the best, it only needs paging. I tried to merge with some scripts paging, but not run, perhaps, by my little knowledge.

Milton Luiz Jorge () - 11 years ago - Reply 0

Have you managed to do it? Or does anyone know how to implement paging to this script? :)

Mateusz () - 10 years ago - Reply 0

This works well, but if you wanted only the body to scroll and the top panel-header to remain fixed, how can I accomplish this?

Greg () - 11 years ago - Reply 0

This is not working for me. Would you know why? I click the filter but the table search won't show. I tested on firefox and chrome and both had that problem.

Bladielmickey () - 11 years ago - Reply 0

u added all the html, css and JS codes and called them correctly? it wasnt working, and then i realise i didnt call the JS scripts correctly.. now its working

ᑎᗴᑕᖇᗝᗰᗴ () - 8 years ago - Reply 0

how can I customize it to work with an asp.net Table tag?

David () - 11 years ago - Reply 0

"Panel Tables with Filter" is not working in my pc so can u help me

kamal () - 11 years ago - Reply 0

What browser and browser version?

robm () - 11 years ago - Reply 0

same here. :( I'm using Google Chrome Version 37.0.2062.124 m

Nichole () - 10 years ago - Reply 0

Nice Work!

Alex () - 11 years ago - Reply 0

Thank you very much! :)

robm () - 11 years ago - Reply 0

You should add a "No entries found" row, and reset the table of the search box is empty. :)
For the no entries found you could just take that one from my snippet. :)

Alex () - 11 years ago - Reply 0

Great suggestion! Tried to find your snippet but I couldn't, I threw something together to provide the functionality but would like to see your snippet. Thanks again.

robm () - 11 years ago - Reply 0

Just search for "filter" or "insensitive" without the " in bootsnipp. It's called" JS table filter insensitive "

Alex () - 11 years ago - Reply 0