<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="row"> <div class="col-md-12"><input type="text" class="search" placeholder="Search"></div> </div> <div class="row"> <!-- Nav tabs --> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-body"> <div class="pull-right"> <div class="btn-group"> <button type="button" class="btn btn-xs btn-filter " data-target="pagado">Pagado</button> <button type="button" class="btn btn-xs btn-filter" data-target="pendiente">Pendiente</button> <button type="button" class="btn btn-xs btn-filter" data-target="cancelado">Cancelado</button> <button type="button" class="btn btn-xs btn-filter" data-target="all">Todos</button> </div> </div> <table class="table table-filter"> <tbody> <tr data-status="pagado"> <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">Иванов И.И.</span> <h4 class="title"> 01.01.2017 Рога и копыта <span class="pull-right pagado">Исполнение</span> </h4> <p class="summary">Договор № 1 на сумму 100 000 000 р.</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> <tr data-status="cancelado"> <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="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">Иванов И.И.</span> <h4 class="title"> 01.01.2017 Рога и копыта <span class="pull-right pagado">Исполнение</span> </h4> <p class="summary">Договор № 1 на сумму 100 000 000 р.</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="col-md-9"> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">Home</div> <div role="tabpanel" class="tab-pane" id="profile">profile</div> <div role="tabpanel" class="tab-pane" id="messages">messages</div> <div role="tabpanel" class="tab-pane" id="settings">settings</div> </div> </div> </div>

.search { width: 100%; margin-top: 0px; padding: 0 10px 0 10px; font-weight: 700; font-size: 30px; } .search::-ms-clear{ display: none; } /* sidebar */ /* -------------------------------------------------- :: 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 .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.selected td { background-color: #eee; } .table-filter tr td:first-child { width: 38px; } .table-filter tr td:nth-child(2) { width: 35px; } .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; }

$(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'); } }); });