"Neo"
Bootstrap 4.0.0 Snippet by FlorianS

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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"> <br/> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="panel panel-default panel-table"> <div class="panel-body"> <table id="mytable" class="table table-striped table-bordered table-list"> <thead> <tr> <th class="col-text"></th> <th class="hidden-xs">Id</th> <th class="col-text">Label</th> <th class="col-text">Code</th> <th class="col-text">Active</th> <th class="col-text"></th> </tr> </thead> <tbody> <tr data-status="completed"> <td align="center"><input type="checkbox" class="checkthis"/></td> <td class="hidden-xs">1</td> <td>Aduneo</td> <td>ADU</td> <td><input type="checkbox" id="checkall" onclick="test()"/></td> <td align="center"> <a><span style="color: #3d88bf;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a> </td> </tr> <tr data-status="completed"> <td align="center"><input type="checkbox" class="checkthis"/></td> <td class="hidden-xs">2</td> <td>Carrefour</td> <td>CR</td> <td><input type="checkbox" id="checkall" onclick="test()"/></td> <td align="center"> <a><span style="color: #3d88bf;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a> </td> </tr> <tr data-status="completed"> <td align="center"><input type="checkbox" class="checkthis"/></td> <td class="hidden-xs">3</td> <td>Def</td> <td>DEF</td> <td><input type="checkbox" id="checkall" onclick="test()"/></td> <td align="center"> <a><span style="color: #3d88bf;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a> </td> </tr> <tr data-status="pending"> <td align="center"><input type="checkbox" class="checkthis"/></td> <td class="hidden-xs">4</td> <td>Leroy Merlin</td> <td>LRM</td> <td><input type="checkbox" id="checkall" onclick="test()"/></td> <td align="center"> <a><span style="color: #3d88bf;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a> </td> </tr> <tr data-status="pending"> <td align="center"><input type="checkbox" class="checkthis"/></td> <td class="hidden-xs">5</td> <td>Bolloré</td> <td>BO</td> <td><input type="checkbox" id="checkall" onclick="test()"/></td> <td align="center"> <a><span style="color: #3d88bf;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a> </td> </tr> <tr data-status="pending"> <td align="center"><input type="checkbox" class="checkthis"/></td> <td class="hidden-xs">6</td> <td>Société Générale</td> <td>SG</td> <td><input type="checkbox" id="checkall" onclick="test()"/></td> <td align="center"> <a><span style="color: #3d88bf;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a> </td> </tr> <tr data-status="pending"> <td align="center"><input type="checkbox" class="checkthis"/></td> <td class="hidden-xs">7</td> <td>Siemens</td> <td>SIE</td> <td><input type="checkbox" id="checkall" onclick="test()"/></td> <td align="center"> <a><span style="color: #3d88bf;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a> </td> </tr> <tr data-status="pending"> <td align="center"><input type="checkbox" class="checkthis"/></td> <td class="hidden-xs">8</td> <td>Hermes Paris</td> <td>HER</td> <td><input type="checkbox" id="checkall" onclick="test()"/></td> <td align="center"> <a><span style="color: #3d88bf;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a> </td> </tr> <tr data-status="pending"> <td align="center"><input type="checkbox" class="checkthis"/></td> <td class="hidden-xs">9</td> <td>Forgerock</td> <td>FOR</td> <td><input type="checkbox" id="checkall" onclick="test()"/></td> <td align="center"> <a><span style="color: #3d88bf;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a> </td> </tr> <tr data-status="pending"> <td align="center"><input type="checkbox" class="checkthis"/></td> <td class="hidden-xs">10</td> <td>Siplec</td> <td>SIP</td> <td><input type="checkbox" id="checkall" onclick="test()"/></td> <td align="center"> <a><span style="color: #3d88bf;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a> </td> </tr> <tr data-status="pending"> <td align="center"><input type="checkbox" class="checkthis"/></td> <td class="hidden-xs">11</td> <td>Macif</td> <td>MAC</td> <td><input type="checkbox" id="checkall" onclick="test()"/></td> <td align="center"> <a><span style="color: #3d88bf;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a> </td> </tr> <tr data-status="pending"> <td align="center"><input type="checkbox" class="checkthis"/></td> <td class="hidden-xs">11</td> <td>Côte d'Or</td> <td>CO</td> <td><input type="checkbox" id="checkall" onclick="test()"/></td> <td align="center"> <a><span style="color: #3d88bf;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a> </td> </tr> <tr data-status="completed"> <td align="center"><input type="checkbox" class="checkthis"/></td> <td class="hidden-xs">12</td> <td>Assurance Maladie</td> <td>AM</td> <td><input type="checkbox" id="checkall" onclick="test()"/></td> <td align="center"> <a><span style="color: #3d88bf;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a> </td> </tr> <tr data-status="completed"> <td align="center"><input type="checkbox" class="checkthis"/></td> <td class="hidden-xs">13</td> <td>Sicio</td> <td>SIC</td> <td><input type="checkbox" id="checkall" onclick="test()"/></td> <td align="center"> <a><span style="color: #3d88bf;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a> </td> </tr> <tr data-status="completed"> <td align="center"><input type="checkbox" class="checkthis"/></td> <td class="hidden-xs">14</td> <td>Bureau Veritas</td> <td>BV</td> <td><input type="checkbox" id="checkall" onclick="test()"/></td> <td align="center"> <a><span style="color: #3d88bf;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div>
.btn-group .btn { transition: background-color .3s ease; } .panel-table .panel-body { padding: 0; } .table > thead > tr > th { border-bottom: none; color: white; background: #3d88bf; } .panel-footer, .panel-table .panel-body .table-bordered { border-style: none; margin: 0; } tr:hover { background-color: #3d88bf; opacity: 0.5; } .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; }
$(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); }); } }); });

Related: See More


Questions / Comments: