"Panel table with filters (per column)"
Bootstrap 3.2.0 Snippet by AliounePAYE

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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"> <table class="table table-hover"> <thead> <tr class="filters"> <th><input type="text" class="form-control" placeholder="A" disabled></th> <th><input type="text" class="form-control" placeholder="B" enable></th> <th><input type="text" class="form-control" placeholder="C" disabled></th> <th><input type="text" class="form-control" placeholder="Pret cu TVA inclus" disabled></th> </tr> </thead> <tbody> <tr> <td>525</td> <td>155/65R13 73Q ESKIMO S3+MS</td> <td>Sava</td> <td>141.36 Lei</td> </tr> <tr> <td>506</td> <td>155/65R13 73T FRIGO 2 MS</td> <td>Debica</td> <td>148.56 Lei</td> </tr> <tr> <td>3199</td> <td>155/80R13 79Q WINTER 1</td> <td>Tigar</td> <td>135.14 Lei</td> </tr> <tr> <td>2888</td> <td>165/70R13 79T AW02</td> <td>Aeolus</td> <td>107.88 Lei</td> </tr> <tr> <td>2193</td> <td>165/70R14 81T ICE TOURING AVON</td> <td>Avon</td> <td>161.2 Lei</td> </tr> <tr> <td>1369</td> <td>165/70R14 81T NAVIGATOR 2 MS</td> <td>Debica</td> <td>157.48 Lei</td> </tr> <tr> <td>2889</td> <td>175/65R14 82T AW02</td> <td>Aeolus</td> <td>130.2 Lei</td> </tr> <tr> <td>500</td> <td>175/65R14 82T ESKIMO S3+MS</td> <td>Sava</td> <td>163.68 Lei</td> </tr> <tr> <td>524</td> <td>175/65R14 82T FRIGO 2 MS</td> <td>Debica</td> <td>172.36 Lei</td> </tr> <tr> <td>508</td> <td>175/65R15 88T ESKIMO S3+MS XL</td> <td>Sava</td> <td>266.5 Lei</td> </tr> <tr> <td>531</td> <td>175/70R14 84T FRIGO 2 MS</td> <td>Debica</td> <td>179.8 Lei</td> </tr> <tr> <td>548</td> <td>185/55R15 82T ESKIMO S3+MS</td> <td>Sava</td> <td>272.8 Lei</td> </tr> <tr> <td>3023</td> <td>185/60R14 82T AW02</td> <td>Aeolus</td> <td>131.44 Lei</td> </tr> <tr> <td>517</td> <td>185/60R14 82T FRIGO 2 MS</td> <td>Debica</td> <td>186.41 Lei</td> </tr> <tr> <td>2195</td> <td>185/60R14 82T ICE TOURING AVON</td> <td>Avon</td> <td>173.6 Lei</td> </tr> <tr> <td>535</td> <td>185/65R14 86T FRIGO 2 MS</td> <td>Debica</td> <td>186.6 Lei</td> </tr> <tr> <td>503</td> <td>185/65R15 88T FRIGO 2 MS</td> <td>Debica</td> <td>193.62 Lei</td> </tr> <tr> <td>1614</td> <td>185/65R15 88T VIKING SNOWTECH II</td> <td>Viking</td> <td>192.21 Lei</td> </tr> <tr> <td>520</td> <td>195/50R15 82H ESKIMO HP MS</td> <td>Sava</td> <td>238.81 Lei</td> </tr> <tr> <td>536</td> <td>195/60R15 88T ESKIMO S3+MS</td> <td>Sava</td> <td>219.48 Lei</td> </tr> <tr> <td>1862</td> <td>195/65R15 91H VIKING PRO-TECH II</td> <td>Viking</td> <td>209.56 Lei</td> </tr> <tr> <td>2199</td> <td>195/65R15 91T ICE TOURING AVON</td> <td>Viking</td> <td>183.52 Lei</td> </tr> <tr> <td>1343</td> <td>195/65R15 91T NAVIGATOR 2 MS</td> <td>Debica</td> <td>204.6 Lei</td> </tr> <tr> <td>2210</td> <td>195/70R15 104/102R VANMASTER M&S GENERIC UK</td> <td>Avon</td> <td>345.96 Lei</td> </tr> <tr> <td>3041</td> <td>195/70R15C 104/102R Lassa WINTUS</td> <td>Lassa</td> <td>287.68 Lei</td> </tr> <tr> <td>512</td> <td>195/75R16C 107/105Q TRENTA MS</td> <td>Sava</td> <td>334.78 Lei</td> </tr> <tr> <td>2200</td> <td>205/50R17 93H XL ICE TOURING ST AVON</td> <td>Avon</td> <td>440.2 Lei</td> </tr> <tr> <td>505</td> <td>205/55R16 91T ESKIMO S3+MS</td> <td>Sava</td> <td>312.48 Lei</td> </tr> <tr> <td>2324</td> <td>205/55R16 91T ICE TOURING AVON</td> <td>Sava</td> <td>254.28 Lei</td> </tr> <tr> <td>3200</td> <td>205/55R16 91T SNOWTECH II VIKING</td> <td>Viking</td> <td>248.12 Lei</td> </tr> <tr> <td>2201</td> <td>205/60R16 92H ICE TOURING ST AVON</td> <td>Avon</td> <td>369.52 Lei</td> </tr> <tr> <td>1281</td> <td>205/65R16C 107/105T TRENTA MS</td> <td>Sava</td> <td>396.8 Lei</td> </tr> <tr> <td>547</td> <td>205/75R16C 110/108Q TRENTA MS</td> <td>Sava</td> <td>379.44 Lei</td> </tr> <tr> <td>523</td> <td>205R14C 109/107P TRENTA MS</td> <td>Sava</td> <td>358.36 Lei</td> </tr> <tr> <td>2249</td> <td>215/55R16 97H XL ICE TOURING ST AVON</td> <td>Avon</td> <td>406.72 Lei</td> </tr> <tr> <td>532</td> <td>215/65R16C 106/104T TRENTA MS</td> <td>Sava</td> <td>403.72 Lei</td> </tr> <tr> <td>2202</td> <td>225/40R18 92V XL ICE TOURING ST AVON</td> <td>Avon</td> <td>555.52 Lei</td> </tr> <tr> <td>2212</td> <td>225/55R16 95H ICE TOURING ST AVON</td> <td>Avon</td> <td>414.16 Lei</td> </tr> <tr> <td>2205</td> <td>225/55R17 101V XL ICE TOURING ST AVON</td> <td>Avon</td> <td>541.88 Lei</td> </tr> <tr> <td>3030</td> <td>225/55R17 XL 101 V AW03</td> <td>Aeolus</td> <td>256.68 Lei</td> </tr> <tr> <td>2213</td> <td>225/70R15C 112/110R VANMASTER M&S GENERIC UK</td> <td>Avon</td> <td>404.24 Lei</td> </tr> <tr> <td>2250</td> <td>235/55R17 99H RANGER ICE AVON</td> <td>Avon</td> <td>529.48 Lei</td> </tr> <tr> <td>2206</td> <td>235/60R16 100H ICE TOURING ST AVON</td> <td>Avon</td> <td>443.92 Lei</td> </tr> <tr> <td>2209</td> <td>235/65R17 108H XL RANGER ICE AVON</td> <td>Avon</td> <td>551.8 Lei</td> </tr> </tbody> </table> </div> </div> </div>
/* 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: