Easy Table Filter
<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>
<div class="media">
<a href="#" class="pull-left">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo">
</a>
<div class="media-body">
<span class="media-meta pull-right">Febrero 13, 2016</span>
<h4 class="title">
Lorem Impsum
<span class="pull-right pagado">(Pagado)</span>
</h4>
<p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div>
</td>
</tr>
<tr data-status="pendiente">
<td>
<div class="ckbox">
<input type="checkbox" id="checkbox3">
<label for="checkbox3"></label>
</div>
</td>
<td>
<a href="javascript:;" class="star">
<i class="glyphicon glyphicon-star"></i>
</a>
</td>
<td>
<div class="media">
<a href="#" class="pull-left">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo">
</a>
<div class="media-body">
<span class="media-meta pull-right">Febrero 13, 2016</span>
<h4 class="title">
Lorem Impsum
<span class="pull-right pendiente">(Pendiente)</span>
</h4>
<p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div>
</td>
</tr>
<tr data-status="cancelado">
<td>
<div class="ckbox">
<input type="checkbox" id="checkbox2">
<label for="checkbox2"></label>
</div>
</td>
<td>
<a href="javascript:;" class="star">
<i class="glyphicon glyphicon-star"></i>
</a>
</td>
<td>
<div class="media">
<a href="#" class="pull-left">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo">
</a>
<div class="media-body">
<span class="media-meta pull-right">Febrero 13, 2016</span>
<h4 class="title">
Lorem Impsum
<span class="pull-right cancelado">(Cancelado)</span>
</h4>
<p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div>
</td>
</tr>
<tr data-status="pagado" class="selected">
<td>
<div class="ckbox">
<input type="checkbox" id="checkbox4" checked>
<label for="checkbox4"></label>
</div>
</td>
<td>
<a href="javascript:;" class="star star-checked">
<i class="glyphicon glyphicon-star"></i>
</a>
</td>
<td>
<div class="media">
<a href="#" class="pull-left">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo">
</a>
<div class="media-body">
<span class="media-meta pull-right">Febrero 13, 2016</span>
<h4 class="title">
Lorem Impsum
<span class="pull-right pagado">(Pagado)</span>
</h4>
<p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div>
</td>
</tr>
<tr data-status="pendiente">
<td>
<div class="ckbox">
<input type="checkbox" id="checkbox5">
<label for="checkbox5"></label>
</div>
</td>
<td>
<a href="javascript:;" class="star">
<i class="glyphicon glyphicon-star"></i>
</a>
</td>
<td>
<div class="media">
<a href="#" class="pull-left">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo">
</a>
<div class="media-body">
<span class="media-meta pull-right">Febrero 13, 2016</span>
<h4 class="title">
Lorem Impsum
<span class="pull-right pendiente">(Pendiente)</span>
</h4>
<p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="content-footer">
<p>
Page © - 2016 <br>
Powered By <a href="https://www.facebook.com/tavo.qiqe.lucero" target="_blank">TavoQiqe</a>
</p>
</div>
</div>
</section>
</div>
</div>
/* --------------------------------------------------
:: 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;
}
.table-filter tbody tr:hover {
cursor: pointer;
background-color: #eee;
}
.table-filter tbody tr td {
padding: 10px;
vertical-align: middle;
border-top-color: #eee;
}
.table-filter tbody tr.selected td {
background-color: #eee;
}
.table-filter tr td:first-child {
width: 38px;
}
.table-filter tr td:nth-child(2) {
width: 35px;
}
.ckbox {
position: relative;
}
.ckbox input[type="checkbox"] {
opacity: 0;
}
.ckbox label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ckbox label:before {
content: '';
top: 1px;
left: 0;
width: 18px;
height: 18px;
display: block;
position: absolute;
border-radius: 2px;
border: 1px solid #bbb;
background-color: #fff;
}
.ckbox input[type="checkbox"]:checked + label:before {
border-color: #2BBCDE;
background-color: #2BBCDE;
}
.ckbox input[type="checkbox"]:checked + label:after {
top: 3px;
left: 3.5px;
content: '\e013';
color: #fff;
font-size: 11px;
font-family: 'Glyphicons Halflings';
position: absolute;
}
.table-filter .star {
color: #ccc;
text-align: center;
display: block;
}
.table-filter .star.star-checked {
color: #F0AD4E;
}
.table-filter .star:hover {
color: #ccc;
}
.table-filter .star.star-checked:hover {
color: #F0AD4E;
}
.table-filter .media-photo {
width: 35px;
}
.table-filter .media-body {
display: block;
/* Had to use this style to force the div to expand (wasn't necessary with my bootstrap version 3.3.6) */
}
.table-filter .media-meta {
font-size: 11px;
color: #999;
}
.table-filter .media .title {
color: #2BBCDE;
font-size: 14px;
font-weight: bold;
line-height: normal;
margin: 0;
}
.table-filter .media .title span {
font-size: .8em;
margin-right: 20px;
}
.table-filter .media .title span.pagado {
color: #5cb85c;
}
.table-filter .media .title span.pendiente {
color: #f0ad4e;
}
.table-filter .media .title span.cancelado {
color: #d9534f;
}
.table-filter .media .summary {
font-size: 14px;
}
esta genial, solo le agregaria el tema de mostrar maximo de rows y el paginator. gracias por la tabla,Los botones con las opciones me quedan sin estilo ninguno, en realidad creo que no se carga ningun estilo! :/,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.,the best,Olá como eu poderia realizar o download deste snippet ?,Great snipp 🙂 Thanks !,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.,You could add this before buttons click event:,$(‘.table tr’).css(‘display’, ‘none’);$(‘.table tr[data-status=”mystatus”]’).fadeIn(‘fast’);,sdfgsdfg dsfg,Aasdk wieoqda :),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.,Is there any error on the console? Sorry for taking me 2 months to reply you. Hope this problem’s solved by now.,nice,Thnks :),great collection of snipp,Muito legal ! Só o português tem que dar uma revisada: “Pagado” !!!,lol,It’s Spanish, not Portuguese.,great snippet TavoQiqe!!thank u!,The author is TavoQiqe
Loading...
