"Bootstrap table with individual column filters + Fixed header scrolling"
Bootstrap 3.3.0 Snippet by sshelzi

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 media="all" type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/floatthead/1.2.13/jquery.floatThead.min.js"></script> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="panel panel-primary filterable"> <div class="table-responsive"> <table id="mytable" class="table table-striped"> <thead> <tr class="filters"> <th class="col-md-10"><input type="text" class="form-control" placeholder="Course" disabled></th> <th class="col-md-2"><button class="btn btn-primary btn-xs btn-filter">Filter</button> <button class="btn btn-primary btn-xs btn-reset">Reset</button></th> </tr> </thead> <tbody> <tr> <td><a href="">OD10969 Active Directory® Services with Windows Server®</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> </tr> <tr> <td><a href="">OD20462 Administering Microsoft® SQL Server® 2014 Databases</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> </tr> <tr> <td><a href="">OD10747 Administering System Center 2012 Configuration Manager</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> <tr> <td><a href="">OD20411 Administering Windows Server® 2012</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> </tr> <tr> <td><a href="">OD10962 Advanced Automated Administration with Windows PowerShell®</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> </tr> <tr> <td><a href="">OD10961 Automating Administration with Windows PowerShell®</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> </tr> <tr> <td><a href="">OD10964 Cloud & Datacenter Monitoring with System Center Operations Manager</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> </tr> <tr> <td><a href="">OD20412 Configuring Advanced Windows Server® 2012 Services</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> </tr> <tr> <td><a href="">OD20341 Core Solutions of Microsoft® Exchange Server 2013</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> </tr> <tr> <td><a href="">OD20331 Core Solutions of Microsoft® SharePoint® Server 2013</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> </tr> <tr> <td><a href="">OD99998 Customer Demo Course: Installing and Configuring Windows 10 – Module 1</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> </tr> <tr> <td><a href="">OD20413 Designing and Implementing a Server Infrastructure</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> </tr> <tr> <td><a href="">OD20463 Implementing a Data Warehouse with Microsoft® SQL Server® 2014</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> </tr> <tr> <td><a href="">OD20697-1 Installing and Configuring Windows 10</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> </tr> <tr> <td><a href="">OD20410 Installing and Configuring Windows Server® 2012</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> </tr> <tr> <td><a href="">OD10267 Introduction to Web Development with Microsoft® Visual Studio® 2010</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> </tr> <tr> <td><a href="">OD10748 Planning and Deploying System Center 2012 Configuration Manager</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> </tr> <tr> <td><a href="">OD20483 Programming in C#</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> </tr> <tr> <td><a href="">OD20480 Programming in HTML5 with JavaScript and CSS3</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> </tr> <tr> <td><a href="">OD20461 Querying Microsoft SQL Server® 2014</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> </tr> <tr> <td><a href="">OD10982 Supporting and Troubleshooting Windows 10</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> </tr> <tr> <td><a href="">OD20417 Upgrading Your Skills to MCSA Windows Server® 2012</a></td> <td><a href="JavaScript:newPopup('/Contact/EmailRequest');" class="btn btn-primary">Request</a></td> </tr> </tbody> </table> </div> </div> </div> </div> </body>
body { width:100%; } .floatThead-floatContainer { left: inherit !important; } .table td:last-child { text-align:center; } .filters { background-color: orange; } .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; }
$(document).ready(function() { $("[data-toggle=tooltip]").tooltip(); $('#mytable').floatThead({ useAbsolutePositioning: false }); $('.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); $filters.first().focus(); //$tbody.find('.no-result').remove(); //$tbody.find('tr').show(); } }); $('.filterable .btn-reset').click(function(){ var $panel = $(this).parents('.filterable'), $filters = $panel.find('.filters input'), $tbody = $panel.find('.table tbody'); $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

Vue Light Bootstrap Dashboard
Bootstrap Tabs with Table
Creative Princing Table
BS4 Simple & Clean Pricing table

Questions / Comments: