<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="panel filterable">
<div class="panel-heading.">
<div class="pull-right">
</div>
</div>
<table class="tablenb">
<thead>
<tr class="filters">
<th></th>
<th><input type="text" class="form-control" placeholder="Imię" enabled></th>
<th><input type="text" class="form-control" placeholder="Nazwisko" enabled></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="text-center"><button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal">Dodaj</a></button></th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">Foto</td>
<td>Imię</td>
<td>Nazwisko</td>
<td class="text-center">Płeć</td>
<td class="text-center">Data urodzenia</td>
<td class="text-center">Waga</td>
<td class="text-center">Kyu</td>
<td class="text-center">Dan</td>
<td class="text-center">Info</td>
<td class="text-center">Edytuj</td>
<td class="text-center">Usuń</td>
</tr>
<tr>
<td class="text-center"><button type="button" class="btn btn-primary btn-sm " data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-picture fa-3x" aria-hidden="true"></span></button></td>
<td>Wojciech</td>
<td>Wawer</td>
<td class="text-center">M</td>
<td class="text-center">26.09.2009</td>
<td class="text-center">30 kg</td>
<td class="text-center">8,2</td>
<td class="text-center"></td>
<td class="text-center">Info</td>
<th class="text-center"><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#edytuj">Edytuj</a></button></th>
<th class="text-center"><button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#usun">Usuń</a></button></th>
</tr>
<tr>
<td class="text-center"><button type="button" class="btn btn-primary btn-sm img-circle" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-picture" aria-label="true"></span></button></td>
<td>Adam</td>
<td>Kowalski</td>
<td class="text-center">M</td>
<td class="text-center">26.09.2009</td>
<td class="text-center">30 kg</td>
<td class="text-center">8,2</td>
<td class="text-center"></td>
<td class="text-center">Info</td>
<td class="text-center"><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#edytuj">Edytuj</a></button></td>
<td class="text-center"><button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#usun">Usuń</a></button></td>
</tr>
</table>
</div>
</div>
<!-- Modal Dodaj -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal EDYTUJ -->
<div class="modal fade" id="edytuj" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal USUŃ -->
<div class="modal fade" id="usun" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
.media-object-mini {
display: block;
width: 20px;
height: 20px;
}
.card {
background: #FFF none repeat scroll 0% 0%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
margin-bottom: 30px;
}
.tablenb {
border-collapse: collapse !important;
}
.tablenb td,
.tablenb th {
background-color: #fff !important;
}
.tablenb-bordered th,
.tablenb-bordered td {
border: 1px solid #ddd !important;
}
table {
background-color: transparent;
}
caption {
padding-top: 8px;
padding-bottom: 8px;
color: #777;
text-align: left;
}
th {
text-align: left;
}
.tablenb {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.tablenb > thead > tr > th,
.tablenb > tbody > tr > th,
.tablenb > tfoot > tr > th,
.tablenb > thead > tr > td,
.tablenb > tbody > tr > td,
.tablenb > tfoot > tr > td {
padding: 8px;
line-height: 1.42857143;
vertical-align: super;
border-top: 0px solid #ddd;
}
.tablenb > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #ddd;
}
.tablenb > caption + thead > tr:first-child > th,
.tablenb > colgroup + thead > tr:first-child > th,
.tablenb > thead:first-child > tr:first-child > th,
.tablenb > caption + thead > tr:first-child > td,
.tablenb > colgroup + thead > tr:first-child > td,
.tablenb > thead:first-child > tr:first-child > td {
border-top: 0;
}
.tablenb > tbody + tbody {
border-top: 2px solid #ddd;
}
.tablenb .tablenb {
background-color: #fff;
}
.tablenb-condensed > thead > tr > th,
.tablenb-condensed > tbody > tr > th,
.tablenb-condensed > tfoot > tr > th,
.tablenb-condensed > thead > tr > td,
.tablenb-condensed > tbody > tr > td,
.tablenb-condensed > tfoot > tr > td {
padding: 5px;
}
.tablenb-bordered {
border: 1px solid #ddd;
}
.tablenb-bordered > thead > tr > th,
.tablenb-bordered > tbody > tr > th,
.tablenb-bordered > tfoot > tr > th,
.tablenb-bordered > thead > tr > td,
.tablenb-bordered > tbody > tr > td,
.tablenb-bordered > tfoot > tr > td {
border: 1px solid #ddd;
}
.tablenb-bordered > thead > tr > th,
.tablenb-bordered > thead > tr > td {
border-bottom-width: 2px;
}
.tablenb-striped > tbody > tr:nth-of-type(odd) {
background-color: #f9f9f9;
}
.tablenb-hover > tbody > tr:hover {
background-color: #f5f5f5;
}
table col[class*="col-"] {
position: static;
display: table-column;
float: none;
}
table td[class*="col-"],
table th[class*="col-"] {
position: static;
display: table-cell;
float: none;
}
.tablenb > thead > tr > td.active,
.tablenb > tbody > tr > td.active,
.tablenb > tfoot > tr > td.active,
.tablenb > thead > tr > th.active,
.tablenb > tbody > tr > th.active,
.tablenb > tfoot > tr > th.active,
.tablenb > thead > tr.active > td,
.tablenb > tbody > tr.active > td,
.tablenb > tfoot > tr.active > td,
.tablenb > thead > tr.active > th,
.tablenb > tbody > tr.active > th,
.tablenb > tfoot > tr.active > th {
background-color: #f5f5f5;
}
.tablenb-hover > tbody > tr > td.active:hover,
.tablenb-hover > tbody > tr > th.active:hover,
.tablenb-hover > tbody > tr.active:hover > td,
.tablenb-hover > tbody > tr:hover > .active,
.tablenb-hover > tbody > tr.active:hover > th {
background-color: #e8e8e8;
}
.tablenb > thead > tr > td.success,
.tablenb > tbody > tr > td.success,
.tablenb > tfoot > tr > td.success,
.tablenb > thead > tr > th.success,
.tablenb > tbody > tr > th.success,
.tablenb > tfoot > tr > th.success,
.tablenb > thead > tr.success > td,
.tablenb > tbody > tr.success > td,
.tablenb > tfoot > tr.success > td,
.tablenb > thead > tr.success > th,
.tablenb > tbody > tr.success > th,
.tablenb > tfoot > tr.success > th {
background-color: #dff0d8;
}
.tablenb-hover > tbody > tr > td.success:hover,
.tablenb-hover > tbody > tr > th.success:hover,
.tablenb-hover > tbody > tr.success:hover > td,
.tablenb-hover > tbody > tr:hover > .success,
.tablenb-hover > tbody > tr.success:hover > th {
background-color: #d0e9c6;
}
.tablenb > thead > tr > td.info,
.tablenb > tbody > tr > td.info,
.tablenb > tfoot > tr > td.info,
.tablenb > thead > tr > th.info,
.tablenb > tbody > tr > th.info,
.tablenb > tfoot > tr > th.info,
.tablenb > thead > tr.info > td,
.tablenb > tbody > tr.info > td,
.tablenb > tfoot > tr.info > td,
.tablenb > thead > tr.info > th,
.tablenb > tbody > tr.info > th,
.tablenb > tfoot > tr.info > th {
background-color: #d9edf7;
}
.tablenb-hover > tbody > tr > td.info:hover,
.tablenb-hover > tbody > tr > th.info:hover,
.tablenb-hover > tbody > tr.info:hover > td,
.tablenb-hover > tbody > tr:hover > .info,
.tablenb-hover > tbody > tr.info:hover > th {
background-color: #c4e3f3;
}
.tablenb > thead > tr > td.warning,
.tablenb > tbody > tr > td.warning,
.tablenb > tfoot > tr > td.warning,
.tablenb > thead > tr > th.warning,
.tablenb > tbody > tr > th.warning,
.tablenb > tfoot > tr > th.warning,
.tablenb > thead > tr.warning > td,
.tablenb > tbody > tr.warning > td,
.tablenb > tfoot > tr.warning > td,
.tablenb > thead > tr.warning > th,
.tablenb > tbody > tr.warning > th,
.tablenb > tfoot > tr.warning > th {
background-color: #fcf8e3;
}
.tablenb-hover > tbody > tr > td.warning:hover,
.tablenb-hover > tbody > tr > th.warning:hover,
.tablenb-hover > tbody > tr.warning:hover > td,
.tablenb-hover > tbody > tr:hover > .warning,
.tablenb-hover > tbody > tr.warning:hover > th {
background-color: #faf2cc;
}
.tablenb > thead > tr > td.danger,
.tablenb > tbody > tr > td.danger,
.tablenb > tfoot > tr > td.danger,
.tablenb > thead > tr > th.danger,
.tablenb > tbody > tr > th.danger,
.tablenb > tfoot > tr > th.danger,
.tablenb > thead > tr.danger > td,
.tablenb > tbody > tr.danger > td,
.tablenb > tfoot > tr.danger > td,
.tablenb > thead > tr.danger > th,
.tablenb > tbody > tr.danger > th,
.tablenb > tfoot > tr.danger > th {
background-color: #f2dede;
}
.tablenb-hover > tbody > tr > td.danger:hover,
.tablenb-hover > tbody > tr > th.danger:hover,
.tablenb-hover > tbody > tr.danger:hover > td,
.tablenb-hover > tbody > tr:hover > .danger,
.tablenb-hover > tbody > tr.danger:hover > th {
background-color: #ebcccc;
}
.tablenb-responsive {
min-height: .01%;
overflow-x: auto;
}
@media screen and (max-width: 767px) {
.tablenb-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
.tablenb-responsive > .tablenb {
margin-bottom: 0;
}
.tablenb-responsive > .tablenb > thead > tr > th,
.tablenb-responsive > .tablenb > tbody > tr > th,
.tablenb-responsive > .tablenb > tfoot > tr > th,
.tablenb-responsive > .tablenb > thead > tr > td,
.tablenb-responsive > .tablenb > tbody > tr > td,
.tablenb-responsive > .tablenb > tfoot > tr > td {
white-space: nowrap;
}
.tablenb-responsive > .tablenb-bordered {
border: 0;
}
.tablenb-responsive > .tablenb-bordered > thead > tr > th:first-child,
.tablenb-responsive > .tablenb-bordered > tbody > tr > th:first-child,
.tablenb-responsive > .tablenb-bordered > tfoot > tr > th:first-child,
.tablenb-responsive > .tablenb-bordered > thead > tr > td:first-child,
.tablenb-responsive > .tablenb-bordered > tbody > tr > td:first-child,
.tablenb-responsive > .tablenb-bordered > tfoot > tr > td:first-child {
border-left: 0;
}
.tablenb-responsive > .tablenb-bordered > thead > tr > th:last-child,
.tablenb-responsive > .tablenb-bordered > tbody > tr > th:last-child,
.tablenb-responsive > .tablenb-bordered > tfoot > tr > th:last-child,
.tablenb-responsive > .tablenb-bordered > thead > tr > td:last-child,
.tablenb-responsive > .tablenb-bordered > tbody > tr > td:last-child,
.tablenb-responsive > .tablenb-bordered > tfoot > tr > td:last-child {
border-right: 0;
}
.tablenb-responsive > .tablenb-bordered > tbody > tr:last-child > th,
.tablenb-responsive > .tablenb-bordered > tfoot > tr:last-child > th,
.tablenb-responsive > .tablenb-bordered > tbody > tr:last-child > td,
.tablenb-responsive > .tablenb-bordered > tfoot > tr:last-child > td {
border-bottom: 0;
}
.panel > .tablenb,
.panel > .tablenb-responsive > .tablenb,
.panel > .panel-collapse > .tablenb {
margin-bottom: 0;
}
.panel > .tablenb caption,
.panel > .tablenb-responsive > .tablenb caption,
.panel > .panel-collapse > .tablenb caption {
padding-right: 15px;
padding-left: 15px;
}
.panel > .tablenb:first-child,
.panel > .tablenb-responsive:first-child > .tablenb:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.panel > .tablenb:first-child > thead:first-child > tr:first-child,
.panel > .tablenb-responsive:first-child > .tablenb:first-child > thead:first-child > tr:first-child,
.panel > .tablenb:first-child > tbody:first-child > tr:first-child,
.panel > .tablenb-responsive:first-child > .tablenb:first-child > tbody:first-child > tr:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.panel > .tablenb:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .tablenb-responsive:first-child > .tablenb:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .tablenb:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .tablenb-responsive:first-child > .tablenb:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .tablenb:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .tablenb-responsive:first-child > .tablenb:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .tablenb:first-child > tbody:first-child > tr:first-child th:first-child,
.panel > .tablenb-responsive:first-child > .tablenb:first-child > tbody:first-child > tr:first-child th:first-child {
border-top-left-radius: 3px;
}
.panel > .tablenb:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .tablenb-responsive:first-child > .tablenb:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .tablenb:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .tablenb-responsive:first-child > .tablenb:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .tablenb:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .tablenb-responsive:first-child > .tablenb:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .tablenb:first-child > tbody:first-child > tr:first-child th:last-child,
.panel > .tablenb-responsive:first-child > .tablenb:first-child > tbody:first-child > tr:first-child th:last-child {
border-top-right-radius: 3px;
}
.panel > .tablenb:last-child,
.panel > .tablenb-responsive:last-child > .tablenb:last-child {
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.panel > .tablenb:last-child > tbody:last-child > tr:last-child,
.panel > .tablenb-responsive:last-child > .tablenb:last-child > tbody:last-child > tr:last-child,
.panel > .tablenb:last-child > tfoot:last-child > tr:last-child,
.panel > .tablenb-responsive:last-child > .tablenb:last-child > tfoot:last-child > tr:last-child {
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.panel > .tablenb:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .tablenb-responsive:last-child > .tablenb:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .tablenb:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .tablenb-responsive:last-child > .tablenb:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .tablenb:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .tablenb-responsive:last-child > .tablenb:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .tablenb:last-child > tfoot:last-child > tr:last-child th:first-child,
.panel > .tablenb-responsive:last-child > .tablenb:last-child > tfoot:last-child > tr:last-child th:first-child {
border-bottom-left-radius: 3px;
}
.panel > .tablenb:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .tablenb-responsive:last-child > .tablenb:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .tablenb:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .tablenb-responsive:last-child > .tablenb:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .tablenb:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .tablenb-responsive:last-child > .tablenb:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .tablenb:last-child > tfoot:last-child > tr:last-child th:last-child,
.panel > .tablenb-responsive:last-child > .tablenb:last-child > tfoot:last-child > tr:last-child th:last-child {
border-bottom-right-radius: 3px;
}
.panel > .panel-body + .tablenb,
.panel > .panel-body + .tablenb-responsive,
.panel > .tablenb + .panel-body,
.panel > .tablenb-responsive + .panel-body {
border-top: 1px solid #ddd;
}
.panel > .tablenb > tbody:first-child > tr:first-child th,
.panel > .tablenb > tbody:first-child > tr:first-child td {
border-top: 0;
}
.panel > .tablenb-bordered,
.panel > .tablenb-responsive > .tablenb-bordered {
border: 0;
}
.panel > .tablenb-bordered > thead > tr > th:first-child,
.panel > .tablenb-responsive > .tablenb-bordered > thead > tr > th:first-child,
.panel > .tablenb-bordered > tbody > tr > th:first-child,
.panel > .tablenb-responsive > .tablenb-bordered > tbody > tr > th:first-child,
.panel > .tablenb-bordered > tfoot > tr > th:first-child,
.panel > .tablenb-responsive > .tablenb-bordered > tfoot > tr > th:first-child,
.panel > .tablenb-bordered > thead > tr > td:first-child,
.panel > .tablenb-responsive > .tablenb-bordered > thead > tr > td:first-child,
.panel > .tablenb-bordered > tbody > tr > td:first-child,
.panel > .tablenb-responsive > .tablenb-bordered > tbody > tr > td:first-child,
.panel > .tablenb-bordered > tfoot > tr > td:first-child,
.panel > .tablenb-responsive > .tablenb-bordered > tfoot > tr > td:first-child {
border-left: 0;
}
.panel > .tablenb-bordered > thead > tr > th:last-child,
.panel > .tablenb-responsive > .tablenb-bordered > thead > tr > th:last-child,
.panel > .tablenb-bordered > tbody > tr > th:last-child,
.panel > .tablenb-responsive > .tablenb-bordered > tbody > tr > th:last-child,
.panel > .tablenb-bordered > tfoot > tr > th:last-child,
.panel > .tablenb-responsive > .tablenb-bordered > tfoot > tr > th:last-child,
.panel > .tablenb-bordered > thead > tr > td:last-child,
.panel > .tablenb-responsive > .tablenb-bordered > thead > tr > td:last-child,
.panel > .tablenb-bordered > tbody > tr > td:last-child,
.panel > .tablenb-responsive > .tablenb-bordered > tbody > tr > td:last-child,
.panel > .tablenb-bordered > tfoot > tr > td:last-child,
.panel > .tablenb-responsive > .tablenb-bordered > tfoot > tr > td:last-child {
border-right: 0;
}
.panel > .tablenb-bordered > thead > tr:first-child > td,
.panel > .tablenb-responsive > .tablenb-bordered > thead > tr:first-child > td,
.panel > .tablenb-bordered > tbody > tr:first-child > td,
.panel > .tablenb-responsive > .tablenb-bordered > tbody > tr:first-child > td,
.panel > .tablenb-bordered > thead > tr:first-child > th,
.panel > .tablenb-responsive > .tablenb-bordered > thead > tr:first-child > th,
.panel > .tablenb-bordered > tbody > tr:first-child > th,
.panel > .tablenb-responsive > .tablenb-bordered > tbody > tr:first-child > th {
border-bottom: 0;
}
.panel > .tablenb-bordered > tbody > tr:last-child > td,
.panel > .tablenb-responsive > .tablenb-bordered > tbody > tr:last-child > td,
.panel > .tablenb-bordered > tfoot > tr:last-child > td,
.panel > .tablenb-responsive > .tablenb-bordered > tfoot > tr:last-child > td,
.panel > .tablenb-bordered > tbody > tr:last-child > th,
.panel > .tablenb-responsive > .tablenb-bordered > tbody > tr:last-child > th,
.panel > .tablenb-bordered > tfoot > tr:last-child > th,
.panel > .tablenb-responsive > .tablenb-bordered > tfoot > tr:last-child > th {
border-bottom: 0;
}
.panel > .tablenb-responsive {
margin-bottom: 0;
border: 0;
}
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
/*
Please consider that the JS part isn't production ready at all, I just code it to show the concept of merging filters and titles together !
*/
$(document).ready(function(){
$('.filterable .btn-filter').click(function(){
var $panel = $(this).parents('.filterable'),
$filters = $panel.find('.filters input'),
$tbody = $panel.find('.tablenb tbody');
if ($filters.prop('disabled') == true) {
$filters.prop('disabled', false);
$filters.first().focus();
} else {
$filters.val('').prop('disabled', true);
$tbody.find('.no-result').remove();
$tbody.find('tr').show();
}
});
$('.filterable .filters input').keyup(function(e){
/* Ignore tab key */
var code = e.keyCode || e.which;
if (code == '9') return;
/* Useful DOM data and selectors */
var $input = $(this),
inputContent = $input.val().toLowerCase(),
$panel = $input.parents('.filterable'),
column = $panel.find('.filters th').index($input.parents('th')),
$table = $panel.find('.tablenb'),
$rows = $table.find('tbody tr');
/* Dirtiest filter function ever ;) */
var $filteredRows = $rows.filter(function(){
var value = $(this).find('td').eq(column).text().toLowerCase();
return value.indexOf(inputContent) === -1;
});
/* Clean previous no-result if exist */
$table.find('tbody .no-result').remove();
/* Show all rows, hide filtered ones (never do that outside of a demo ! xD) */
$rows.show();
$filteredRows.hide();
/* Prepend no-result row if all rows are filtered */
if ($filteredRows.length === $rows.length) {
$table.find('tbody').prepend($('<tr class="no-result text-center"><td colspan="'+ $table.find('.filters th').length +'">No result found</td></tr>'));
}
});
});
