<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-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" class="btn-filter" data-target="pagado">Pagado</a></li>
<li><a href="#" class="btn-filter" data-target="pendiente">Pendiente</a></li>
<li><a href="#" class="btn-filter" data-target="cancelado">Cancelado</a></li>
<li><a href="#" class="btn-filter" data-target="all">Todos</a></li>
</ul>
</div>
</div>
<div class="table-container">
<table class="table table-filter">
<tbody>
<tr data-status="pagado">
<td>
<div class="media">
<a href="#" class="pull-left">
<i class="glyphicon glyphicon-envelope gi-2x text-primary"></i>
</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="media">
<a href="#" class="pull-left">
<i class="glyphicon glyphicon-earphone gi-2x text-success"></i>
</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="media">
<a href="#" class="pull-left">
<i class="glyphicon glyphicon-link gi-2x text-warning"></i>
</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="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="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;
}
.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 i.pagado {
color: #5cb85c;
}
.table-filter .media .title span.pendiente {
color: #f0ad4e;
}
.table-filter .media .title i.pendiente {
color: #f0ad4e;
}
.table-filter .media .title span.cancelado {
color: #d9534f;
}
.table-filter .media .summary {
font-size: 14px;
}
.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}
$(document).ready(function () {
$('.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');
}
});
});
