"Easy Table Filter"
Bootstrap 3.3.0 Snippet by TavoQiqe

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="//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">
<section class="content">
<h1>Table Filter</h1>
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-body">
<div class="pull-right">
<div class="btn-group">
<button type="button" class="btn btn-success btn-filter" data-target="pagado">Pagado</button>
<button type="button" class="btn btn-warning btn-filter" data-target="pendiente">Pendiente</button>
<button type="button" class="btn btn-danger btn-filter" data-target="cancelado">Cancelado</button>
<button type="button" class="btn btn-default btn-filter" data-target="all">Todos</button>
</div>
</div>
<div class="table-container">
<table class="table table-filter">
<tbody>
<tr data-status="pagado">
<td>
<div class="ckbox">
<input type="checkbox" id="checkbox1">
<label for="checkbox1"></label>
</div>
</td>
<td>
<a href="javascript:;" class="star">
<i class="glyphicon glyphicon-star"></i>
</a>
</td>
<td>
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
/* --------------------------------------------------
:: General
-------------------------------------------------- */
body {
font-family: 'Open Sans', sans-serif;
color: #353535;
}
.content h1 {
text-align: center;
}
.content .content-footer p {
color: #6d6d6d;
font-size: 12px;
text-align: center;
}
.content .content-footer p a {
color: inherit;
font-weight: bold;
}
/* --------------------------------------------------
:: Table Filter
-------------------------------------------------- */
.panel {
border: 1px solid #ddd;
background-color: #fcfcfc;
}
.panel .btn-group {
margin: 15px 0 30px;
}
.panel .btn-group .btn {
transition: background-color .3s ease;
}
.table-filter {
background-color: #fff;
border-bottom: 1px solid #eee;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function () {
$('.star').on('click', function () {
$(this).toggleClass('star-checked');
});
$('.ckbox label').on('click', function () {
$(this).parents('tr').toggleClass('selected');
});
$('.btn-filter').on('click', function () {
var $target = $(this).data('target');
if ($target != 'all') {
$('.table tr').css('display', 'none');
$('.table tr[data-status="' + $target + '"]').fadeIn('slow');
} else {
$('.table tr').css('display', 'none').fadeIn('slow');
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard Pro Angular
Bootstrap Tabs with Table
Creative Princing Table
BS4 Simple & Clean Pricing table

Questions / Comments:

esta genial, solo le agregaria el tema de mostrar maximo de rows y el paginator. gracias por la tabla

HuBrooH () - 6 years ago - Reply 0

Los botones con las opciones me quedan sin estilo ninguno, en realidad creo que no se carga ningun estilo! :/

Gabriel () - 8 years ago - Reply 0

Sí, últimamente este sitio tiene ese problema (o lo tenía). En caso de que siga pasando recarga de nuevo la pagina y eso debería ser suficiente.

TavoQiqe () - 7 years ago - Reply 0

the best

Picassoo () - 8 years ago - Reply 0

Olá como eu poderia realizar o download deste snippet ?

Thais Diniz do Nascimento () - 8 years ago - Reply 0

Great snipp :) Thanks !

Viktor Feso Vel () - 8 years ago - Reply 0

Great Snipp! Could someone tell me how to have one button selected when going to the page so that the user doesn't have to click on the first button. EX: My first button is Popular and I would like for all menu items under Popular to show when going to index.html. At the moment all of my menu items show for all buttons.

Amy () - 8 years ago - Reply 0

You could add this before buttons click event:

$('.table tr').css('display', 'none');
$('.table tr[data-status="mystatus"]').fadeIn('fast');

TavoQiqe () - 8 years ago - Reply 0

sdfgsdfg dsfg

sdfg ss () - 8 years ago - Reply 0

Aasdk wieoqda :)

TavoQiqe () - 8 years ago - Reply 0

hello, i am a complete noob. using this snippet, would that JS run server or client side? (managing a portal within a vendor produced product, they provide portal configuration capabiity that allows for widget design by dropping in CSS etc, i added this in, but when clicking on the buttons to do the filtering, nothing happened.

graeme welsh () - 8 years ago - Reply 0

Is there any error on the console? Sorry for taking me 2 months to reply you. Hope this problem's solved by now.

TavoQiqe () - 8 years ago - Reply 0

nice

Jean Yu () - 8 years ago - Reply 0

Thnks :)

TavoQiqe () - 8 years ago - Reply 0

great collection of snipp

Mrityunjaykumar Gupta () - 9 years ago - Reply 0

Muito legal ! Só o português tem que dar uma revisada: "Pagado" !!!

Eduardo Mattos () - 9 years ago - Reply 0

lol

danyelsanches () - 7 years ago - Reply 0

It's Spanish, not Portuguese.

Nuno Pinto () - 8 years ago - Reply 0

great snippet TavoQiqe!!
thank u!

Fulvio Mammone () - 9 years ago - Reply 0