"Zawodnicy lista"
Bootstrap 3.3.0 Snippet by strikerlg

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$('#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;
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit Pro

Questions / Comments: