<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<div class="container">
<div class="row">
<div class="filterable jobsList">
<table class="table">
<thead>
<tr class="filters active">
<th><input type="text" class="form-control" placeholder="ALL POSITIONS"></th>
<th>
<select class="form-control">
<option value="">ALL DEPARTMENTS</option>
<option value="support">SUPPORT</option>
<option value="programs">PROGRAMS</option>
<option value="visual">VISUAL</option>
<option value="news">NEWS</option>
</select>
</th>
<th>
<select class="form-control">
<option value="">ALL LOCATIONS</option>
<option value="istanbul">ISTANBUL</option>
<option value="london">LONDON</option>
</select>
</th>
</tr>
</thead>
<tbody>
<tr class="jobsRow">
<td><a target="_blank" class="job-link-colorbox cboxElement" href="#">HR SPECIALIST</a></td>
<td>SUPPORT</td>
<td>ISTANBUL</td>
</tr>
<tr class="jobsRow">
<td><a target="_blank" class="job-link-colorbox cboxElement" href="#">AQUISITION LEAD - PROGRAMMING</a></td>
<td>PROGRAMS</td>
<td>ISTANBUL</td>
</tr>
<tr class="jobsRow">
<td><a target="_blank" class="job-link-colorbox cboxElement" href="#">ADMINISTRATIVE SPECIALIST - ISTANBUL</a></td>
<td>SUPPORT</td>
<td>ISTANBUL</td>
</tr>
<tr class="jobsRow">
<td><a target="_blank" class="job-link-colorbox cboxElement" href="#">ADMINISTRATIVE SPECIALIST - LONDON</a></td>
<td>SUPPORT</td>
<td>LONDON</td>
</tr>
<tr class="jobsRow">
<td><a target="_blank" class="job-link-colorbox cboxElement" href="#">ART DIRECTOR</a></td>
<td>VISUAL</td>
<td>ISTANBUL</td>
</tr>
<tr class="jobsRow">
<td><a target="_blank" class="job-link-colorbox cboxElement" href="#">CORRESPONDENT, NEWS - LONDON</a></td>
<td>NEWS</td>
<td>LONDON</td>
</tr>
<tr class="jobsRow">
<td><a target="_blank" class="job-link-colorbox cboxElement" href="#">DEPUTY PROGRAM EDITOR</a></td>
<td>NEWS</td>
<td>ISTANBUL</td>
</tr>
<tr class="jobsRow">
<td><a target="_blank" class="job-link-colorbox cboxElement" href="#">FIELD PRODUCER FOR PROGRAMMIN - WASHINGTON</a></td>
<td>PROGRAMS</td>
<td>WASHINGTON</td>
</tr>
<tr class="jobsRow">
<td><a target="_blank" class="job-link-colorbox cboxElement" href="#">DEPUTY EDITOR/WRITER - PROGRAMS</a></td>
<td>PROGRAMS</td>
<td>ISTANBUL</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
.filterable {
margin-top: 15px;
}
.filterable .panel-heading .pull-right {
margin-top: -20px;
}
.filterable .filters input[disabled] {
background-color: transparent;
border: none;
cursor: auto;
box-shadow: none;
padding: 0;
height: auto;
}
.filterable .filters input[disabled]::-webkit-input-placeholder {
color: #333;
}
.filterable .filters input[disabled]::-moz-placeholder {
color: #333;
}
.filterable .filters input[disabled]:-ms-input-placeholder {
color: #333;
}
.filterable .form-control {
border-radius:0;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.filterable select {
cursor:pointer;
}
$(document).ready(function(){
$('.filterable .btn-filter').click(function(){
var $panel = $(this).parents('.filterable'),
$filters = $panel.find('.filters input, .filters select'),
$tbody = $panel.find('.table 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){
var code = e.keyCode || e.which;
if (code == '9') return;
var $input = $(this),
inputContent = $input.val().toLowerCase(),
$panel = $input.parents('.filterable'),
column = $panel.find('.filters th').index($input.parents('th')),
$table = $panel.find('.table'),
$rows = $table.find('tbody tr');
var $filteredRows = $rows.filter(function(){
var value = $(this).find('td').eq(column).text().toLowerCase();
return value.indexOf(inputContent) === -1;
});
$table.find('tbody .no-result').remove();
$rows.show();
$filteredRows.hide();
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>'));
}
});
$('.filterable .filters select').change(function(e){
var $input = $(this),
inputContent = $input.val(),
$panel = $input.parents('.filterable'),
column = $panel.find('.filters th').index($input.parents('th')),
$table = $panel.find('.table'),
$rows = $table.find('tbody tr');
var $filteredRows = $rows.filter(function(){
var value = $(this).find('td').eq(column).text().toLowerCase();
return value.indexOf(inputContent) === -1;
});
$table.find('tbody .no-result').remove();
$rows.show();
$filteredRows.hide();
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>'));
}
});
});
