"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 () - 2 years 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 () - 2 years ago - Reply 0

I came across this issue as well, have you solved? If you do not bother on giving me, also how can I set a stripped table based on search call method.

felipesp1199 () - 5 months ago - Reply 0

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

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

Hi, your solution is very good, but I came across an issue when you type over an input and then type in another input, the search works fine there, but when you erase the data of one of the inputs, the search comes back with all rows instead of returning the rows matching the data of the remaining input field which is filled.

Hey, I wish I had stripped rows in the table using your search solution, could you help me use that, I know there is css which makes the table stripped, but when I search it returns the rows with their respective strips on table load, it would have to be set on search call method, I couldn't make it work.

Thanks in advance.

felipesp1199 () - 5 months ago - Reply 0


mrnabil82 () - 8 months ago - Reply 0

Muchas Gracias por compartir estos post, son de mucha ayuda

anfic () - 8 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 () - 1 year ago - Reply 0

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

Christophe D () - 2 years ago - Reply 0

Thanks for sharing!

Sadao Yokoyama () - 3 years ago - Reply 0

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

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

cheers for this!

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

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

Mirchu () - 4 years ago - Reply 0

Does this work with pagination?

Khoai Tây Chiên () - 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 () - 3 years ago - Reply 0

how can i apply sorting, ascending or descending?

Umair Hamid () - 4 years ago - Reply 0

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

peter91 () - 4 years ago - Reply 0

Excellent! Thanks for this :)

Heidilux () - 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 () - 4 years ago - Reply 0