<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"> <div class="col-md-8 col-md-offset-2"> <div class="pull-right"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><label for="dropdownMenu1" id="ddLabel" value="ddLabel">All</label> <span class="caret"></span></button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#" class="btn-filter" data-target="All" type="button">All</a></li> <li><a href="#" class="btn-filter" data-target="Grids" type="button">Grids</a></li> <li><a href="#" class="btn-filter" data-target="Charts" type="button">Charts</a></li> <li><a href="#" class="btn-filter" data-target="Clickables" type="button">Clickables</a></li> </ul> </div> </div> <div class="table-container"> <table class="table table-filter"> <tbody> <tr data-tag-1="Grids" data-tag-2="Charts"> <td> <div class="media"> <a class="pull-left" href="#"><img class="media-photo" src="https://cdn3.iconfinder.com/data/icons/food-vector-line-4/128/182-512.png"></a> <div class="media-body"> <span class="media-meta pull-right">Febrero 13, 2016</span> <h4 class="title">Drilldown Grid from Chart<span class="glyphicon glyphicon-th-large pull-right grids" aria-hidden="true"> <span class="glyphicon glyphicon-stats pull-right charts" aria-hidden="true"></span></h4> <p class="summary">You can like click on the chart and it filters the grid data based on what you clicked.</p> </div> </div> </td> </tr> <tr data-tag-1="Charts"> <td> <div class="media"> <a class="pull-left" href="#"><img class="media-photo" src="https://cdn3.iconfinder.com/data/icons/food-vector-line-4/128/182-512.png"></a> <div class="media-body"> <span class="media-meta pull-right">Febrero 13, 2016</span> <h4 class="title">Badass Pie Chart<span class="glyphicon glyphicon-stats pull-right charts" aria-hidden="true"></h4> <p class="summary">Unlike a regular pie chart, this badass pie chart has cool, hover-stats.</p> </div> </div> </td> </tr> <tr data-tag-1="Clickables" data-tag-2="Grids"> <td> <div class="media"> <a class="pull-left" href="#"><img class="media-photo" src="https://cdn3.iconfinder.com/data/icons/food-vector-line-4/128/182-512.png"></a> <div class="media-body"> <span class="media-meta pull-right">Febrero 13, 2016</span> <h4 class="title">Checkboxes to Select Grid Rows<span class="glyphicon glyphicon-th-large pull-right grids" aria-hidden="true"> <span class="glyphicon glyphicon-hand-up pull-right clickables"></h4> <p class="summary">Puts a column of checkboxes that lets you select rows in a grid.</p> </div> </div> </td> </tr> <tr data-tag-1="Grids"> <td> <div class="media"> <a class="pull-left" href="#"><img class="media-photo" src="https://cdn3.iconfinder.com/data/icons/food-vector-line-4/128/182-512.png"></a> <div class="media-body"> <span class="media-meta pull-right">Febrero 13, 2016</span> <h4 class="title">Editable Grid<span class="glyphicon glyphicon-th-large pull-right grids" aria-hidden="true"></h4> <p class="summary">You can just click in cells to change their values.</p> </div> </div> </td> </tr> <tr data-tag-1="Clickables"> <td> <div class="media"> <a class="pull-left" href="#"><img class="media-photo" src="https://cdn3.iconfinder.com/data/icons/food-vector-line-4/128/182-512.png"></a> <div class="media-body"> <span class="media-meta pull-right">Febrero 13, 2016</span> <h4 class="title">Accept/Reject Buttons<span class="glyphicon glyphicon-hand-up pull-right clickables"></h4> <p class="summary">For like workflows and stuff.</p> </div> </div> </td> </tr> <tr data-tag-1="Charts"> <td> <div class="media"> <a class="pull-left" href="#"><img class="media-photo" src="https://cdn3.iconfinder.com/data/icons/food-vector-line-4/128/182-512.png"></a> <div class="media-body"> <span class="media-meta pull-right">Febrero 13, 2016</span> <h4 class="title">Bar Chart 4 Lyf<span class="glyphicon glyphicon-stats pull-right charts" aria-hidden="true"></h4> <p class="summary">Yeah, it's just a bar chart. Because bar charts.</p> </div> </div> </td> </tr> </tbody> </table> </div> </div> </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: 700; } /* -------------------------------------------------- :: 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 .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: 700; line-height: normal; margin: 0; } .table-filter .media .title span { font-size: .8em; margin-right: 20px; } .table-filter .media .title span.grids { color: #5cb85c; } .table-filter .media .title span.charts { color: #f0ad4e; } .table-filter .media .title span.clickables { color: #d9534f; } .table-filter .media .summary { font-size: 14px; } .media-body { width: 100%; }

$(document).ready(function () { $('.btn-filter').on('click', function () { var $target = $(this).data('target'); document.getElementById('ddLabel').innerHTML = $target; if ($target != 'All') { $('.table tr').css('display', 'none'); $('.table tr[data-tag-1="' + $target + '"]').fadeIn('slow'); $('.table tr[data-tag-2="' + $target + '"]').fadeIn('slow'); $('.table tr[data-tag-3="' + $target + '"]').fadeIn('slow'); $('.table tr[data-tag-4="' + $target + '"]').fadeIn('slow'); $('.table tr[data-tag-5="' + $target + '"]').fadeIn('slow'); $('.table tr[data-tag-6="' + $target + '"]').fadeIn('slow'); $('.table tr[data-tag-7="' + $target + '"]').fadeIn('slow'); $('.table tr[data-tag-8="' + $target + '"]').fadeIn('slow'); $('.table tr[data-tag-9="' + $target + '"]').fadeIn('slow'); $('.table tr[data-tag-10="' + $target + '"]').fadeIn('slow'); } else { $('.table tr').css('display', 'none').fadeIn('slow'); } }); });