<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"> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <span class="navbar-brand">Bootstrap Table Panel</span> </div> <p class="navbar-text">With pagination, checkbox column, toggle-filtering and add/edit/delete row placeholders.</p> </div> </nav> </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">Panel title</h3> </div> <div class="col col-xs-6 text-right"> <div class="pull-right"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-success btn-filter active" data-target="completed"> <input type="radio" name="options" id="option1" autocomplete="off" checked> Completed </label> <label class="btn btn-warning btn-filter" data-target="pending"> <input type="radio" name="options" id="option2" autocomplete="off"> Pending </label> <label class="btn btn-default btn-filter" data-target="all"> <input type="radio" name="options" id="option3" autocomplete="off"> All </label> </div> </div> </div> </div> </div> <div class="panel-body"> <table id="mytable" class="table table-striped table-bordered table-list"> <thead> <tr> <th class="col-check"><input type="checkbox" id="checkall" onclick="test()"/></th> <th class="col-tools"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> </th> <th class="hidden-xs">ID</th> <th class="col-text">Name</th> <th class="col-text">Email</th> </tr> </thead> <tbody> <tr data-status="completed"> <td align="center"><input type="checkbox" class="checkthis"/></td> <td align="center"> <a class="btn btn-default"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a> <a class="btn btn-danger"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a> </td> <td class="hidden-xs">1</td> <td>John Doe</td> <td>johndoe@example.com</td> </tr> <tr data-status="pending"> <td align="center"><input type="checkbox" class="checkthis"/></td> <td align="center"> <a class="btn btn-default"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a> <a class="btn btn-danger"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a> </td> <td class="hidden-xs">2</td> <td>Jen Curtis</td> <td>jencurtis@example.com</td> </tr> </tbody> </table> </div> <div class="panel-footer"> <div class="row"> <div class="col col-xs-offset-3 col-xs-6"> <nav aria-label="Page navigation" class="text-center"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li class="active"><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> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </div> <div class="col col-xs-3"> <div class="pull-right"> <button type="button" class="btn btn-primary"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add row </button> </div> </div> </div> </div> </div> </div> </div> <div class="row"> <nav class="navbar navbar-default"> <div class="container-fluid"> <p class="navbar-text">A simple example of how-to put a bordered table within a panel. Responsive, place holders in header/footer for buttons or pagination.</p> </div> </nav> </div> </div>

.btn-group .btn { transition: background-color .3s ease; } .panel-table .panel-body { padding: 0; } .table > thead > tr > th { border-bottom: none; } .panel-footer, .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: 50px; } .panel-table .panel-body .table-bordered > thead > tr > th.col-tools { text-align: center; width: 120px; } .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: 0; } .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: 0; } .panel-table .panel-body .table-bordered > tbody > tr:first-of-type > td { border-bottom: 0; } .panel-table .panel-body .table-bordered > thead > tr:first-of-type > th { border-top: 0; } .pagination > li > a, .pagination > li > span { border-radius: 50% !important; margin: 0 5px; } .pagination { margin: 0; }

$(document).ready(function () { $('.btn-filter').on('click', function () { var $target = $(this).data('target'); if ($target != 'all') { $('.table tbody tr').css('display', 'none'); $('.table tr[data-status="' + $target + '"]').fadeIn('slow'); } else { $('.table tbody tr').css('display', 'none').fadeIn('slow'); } }); $('#checkall').on('click', function () { if ($("#mytable #checkall").is(':checked')) { $("#mytable input[type=checkbox]").each(function () { $(this).prop("checked", true); }); } else { $("#mytable input[type=checkbox]").each(function () { $(this).prop("checked", false); }); } }); });