"Datatable"
Bootstrap 3.1.0 Snippet by explotter

<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>')); } }); });

Related: See More


Questions / Comments: