<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 ----------> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'> <link href="http://select2.github.io/dist/css/select2.min.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="http://select2.github.io/dist/js/select2.full.js"></script> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="btn-group"> <button type="button" class="btn btn-success btn-filter" data-target="enabled">Enabled</button> <button type="button" class="btn btn-warning btn-filter" data-target="disabled">Disabled</button> <button type="button" class="btn btn-danger btn-filter" data-target="inTrash">In Trash</button> <button type="button" class="btn btn-default btn-filter" data-target="all">All</button> </div> </div> </div> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="panel panel-default panel-table"> <div class="panel-heading"> <div class="row"> <div class="col col-xs-6"> <h3 class="panel-title">...</h3> </div> <div class="col col-xs-6 text-right"> <button type="button" class="btn btn-sm btn-default btn-create">Create New</button> <button type="button" class="btn btn-sm btn-default btn-create">Save Changes</button> </div> </div> </div> <div class="panel-body"> <table class="table table-striped table-bordered table-list"> <thead> <tr> <th class="hidden-xs">Hardware ID</th> <th>Model</th> <th>Associated tag</th> <th>Status</th> <th>Options</th> </tr> </thead> <tbody> <tr data-status="disabled"> <td class="hidden-xs text-center">1</td> <td><img src="http://www.qrliving.com/files/qrliving/imagecache/product_slideshow/products/life_2_2.png" class="img-responsive img-circle da-img" alt="Responsive image"></td> <td> <select class="js-example-basic-single"> <option value="AL">Alabama</option> <option value="AL">Parla</option> <option value="AL">Alcorcon</option> <option value="AL">Cusco</option> <option value="WY">Wyoming</option> </select> </td> <td><span class="label label-warning">Disabled</span></td> <td align="center" class="text-left"> <a class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Edit"><em class="fa fa-pencil"></em></a> <a class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Delete"><em class="fa fa-trash"></em></a> <a class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Disabled. Click to enable"><em class="fa fa-toggle-off"></em></a> </td> </tr> <tr data-status="inTrash"> <td class="hidden-xs text-center">1</td> <td><img src="http://the-gadgeteer.com/wp-content/uploads/2013/09/lifestrength-myidband-3.jpg" class="img-responsive img-circle da-img" alt="Responsive image"></td> <td> <select class="js-example-basic-single"> <option value="AL">Alabama</option> <option value="AL">Parla</option> <option value="AL">Alcorcon</option> <option value="AL">Cusco</option> <option value="WY">Wyoming</option> </select> </td> <td><span class="label label-danger">in Trash</span></td> <td align="center" class="text-left"> <a class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Edit"><em class="fa fa-pencil"></em></a> <a class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Restore"><em class="fa fa-refresh"></em></a> </td> </tr> <tr data-status="enabled"> <td class="hidden-xs text-center">1</td> <td><img src="https://s-media-cache-ak0.pinimg.com/236x/75/fd/f3/75fdf3ec85c0ad2e76c2fe31ebae9120.jpg" class="img-responsive img-circle da-img" alt="Responsive image"></td> <td> <select class="js-example-basic-single"> <option value="AL">Alabama</option> <option value="AL">Parla</option> <option value="AL">Alcorcon</option> <option value="AL">Cusco</option> <option value="WY">Wyoming</option> </select> </td> <td><span class="label label-success">Enabled</span></td> <td align="center" class="text-left"> <a class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Edit"><em class="fa fa-pencil"></em></a> <a class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Delete"><em class="fa fa-trash"></em></a> <a class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Enabled. Click to disable"><em class="fa fa-toggle-on"></em></a> </td> </tr> </tbody> </table> </div> <div class="panel-footer"> <div class="row"> <div class="col col-xs-4">Page 1 of 5 </div> <div class="col col-xs-8"> <ul class="pagination hidden-xs pull-right"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> <ul class="pagination visible-xs pull-right"> <li><a href="#">«</a></li> <li><a href="#">»</a></li> </ul> </div> </div> </div> </div> </div></div></div>

.panel-table .panel-body{ padding:0; } .panel-table .panel-body .table-bordered{ border-style: none; margin:0; } .panel-table .panel-body .table-bordered > thead > tr > th:first-of-type { text-align:center; /*width: 100px;*/ } .panel-table .panel-body .table-bordered > thead > tr > th:last-of-type, .panel-table .panel-body .table-bordered > tbody > tr > td:last-of-type { border-right: 0px; } .panel-table .panel-body .table-bordered > thead > tr > th:first-of-type, .panel-table .panel-body .table-bordered > tbody > tr > td:first-of-type { border-left: 0px; } .panel-table .panel-body .table-bordered > tbody > tr:first-of-type > td{ border-bottom: 0px; } .panel-table .panel-body .table-bordered > thead > tr:first-of-type > th{ border-top: 0px; } .panel-table .panel-footer .pagination{ margin:0; } /* used to vertically center elements, may need modification if you're not using default sizes. */ .panel-table .panel-footer .col{ line-height: 34px; height: 34px; } .panel-table .panel-heading .col h3{ line-height: 30px; height: 30px; } .panel-table .panel-body .table-bordered > tbody > tr > td{ line-height: 34px; } /* */ .da-img { max-width:100px; }

$(document).ready(function () { $('.btn-filter').on('click', function () { var $target = $(this).data('target'); if ($target != 'all') { $('tbody tr').css('display', 'none'); $('tbody tr[data-status="' + $target + '"]').fadeIn('slow'); } else { $('tbody tr').css('display', 'none').fadeIn('slow'); } }); $('a').tooltip(); // jquery dropdown $(document).ready(function() { $(".js-example-basic-single").select2(); }); });