Bootstrap Table with filters

	<div class="container">
    <h3>The columns titles are merged with the filters inputs thanks to the placeholders attributes</h3>
    <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>
            <table class="table">
                    <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>
                        <td>the Bird</td>


.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 !
    $('.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);
        } else {
            $filters.val('').prop('disabled', true);

    $('.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) */
        /* 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>'));