"Panel table with filters (per column)"
Bootstrap 3.1.0 Snippet by jgoux

<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 ----------> <div class="container"> <h3>The columns titles are merged with the filters inputs thanks to the placeholders attributes</h3> <hr> <p>Inspired by this <a href="http://bootsnipp.com/snippets/featured/panel-tables-with-filter">snippet</a></p> <div class="row"> <div class="panel panel-primary filterable"> <div class="panel-heading"> <h3 class="panel-title">Users</h3> <div class="pull-right"> <button class="btn btn-default btn-xs btn-filter"><span class="glyphicon glyphicon-filter"></span> Filter</button> </div> </div> <table class="table"> <thead> <tr class="filters"> <th><input type="text" class="form-control" placeholder="#" disabled></th> <th><input type="text" class="form-control" placeholder="First Name" disabled></th> <th><input type="text" class="form-control" placeholder="Last Name" disabled></th> <th><input type="text" class="form-control" placeholder="Username" disabled></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</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; }
/* 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('.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){ /* 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('.table'), $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>')); } }); });

Related: See More


Questions / Comments:

Can someone help me add pagination?

Henrique Rolim (0) - 1 year ago - Reply 1


I think there is a bug:
Try this:
1) In the first name column type 'o' (without the apostrophes) - Row 2 will remain
2) Type 'o' in last name column - Row 1 will appear along with row 2
3) Delete 'o' from last name column and it should go back to Step 1 result (only showing row 2) BUT it shows all 3 rows

Diego R FG (0) - 2 years ago - Reply 0


can we make filter by column name like firstname and lastname and keyup on textbox

ankosh (-1) - 3 months ago - Reply -1


THE FILTER BUTTON ISN'T WORKING ..

mrnabil82 (0) - 2 months ago - Reply 0


Muchas Gracias por compartir estos post, son de mucha ayuda

anfic (0) - 3 months ago - Reply 0


This one works very well. But I would like to add sorting functionality and pagination. Any ideas how to do that with the same styling.?

SHAFEER AMBATT (0) - 1 year ago - Reply 0


Need to add type="button" on filter button.

Christophe D (0) - 2 years ago - Reply 0


Thanks for sharing!

Sadao Yokoyama (0) - 2 years ago - Reply 0


the multiple filter does not work if the table has a lot of data :/

Ricardo Andres Ardila (0) - 2 years ago - Reply 0


cheers for this!

我的鲸鱼太帅了 (0) - 3 years ago - Reply 0


its very nice :) check here landing page www.mirchu.net/rook-bootstr...

Mirchu (0) - 3 years ago - Reply 0


Does this work with pagination?

Khoai Tây Chiên (0) - 4 years ago - Reply 0


Probably not, it's made as a list, so it's pretty good when having a small amount of customers, but when you have 1000's it will struggle, well, I guess it can be more depending on computer / device. You can modify this to make it work with ajax.

laurens (0) - 2 years ago - Reply 0


how can i apply sorting, ascending or descending?

Umair Hamid (0) - 4 years ago - Reply 0


How to edit a jquery code to search multiple columns at once?

peter91 (0) - 4 years ago - Reply 0


Excellent! Thanks for this :)

Heidilux (0) - 4 years ago - Reply 0


Cool plugin. Thx.
I suggest to add on line 30 (after "Useful DOM data and selectors") something like this
if(!$table) $table = $panel;

for users who do not encapsulate your plugin into panel. I added "filterable" class into table tag not to its parent panel ;)

Luke Kozak (0) - 4 years ago - Reply 0