Toggle navigation
TUTORIALS
Basics Of Computer Science
HTML
HTML5
CSS
CSS3
Bootstrap 3
Bootstrap 4
Materialize CSS
JavaScript
jQuery
Ajax
AngularJS
C - Language
Java
PHP
Python
SEO
QUIZ
INTERVIEW QUESTIONS
REFERENCES
Practice Templates
Bootstrap Templates
PHP Projects
PLUGINS
Bootstrap 3 Plugins
Bootstrap 4 Plugins
Static Menus
Responsive Menus
Dropdown
Tabs & Pills
Modal Boxes (Dialog box)
Gallery Plugins
Sliders
Buttons
Dynamic Forms
Forms
Image Effects
G K
New
CURRENT AFFAIRS
New
MORE
IPC Sections
New
School Mathematics
Blog
CODE EDITOR
New
EXECUTE
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Filter, Bootstrap Data Filter - Free Time Learning</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script type="text/javascript" src="http://www.freetimelearning.com/js/jquery-1.11.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <style type="text/css"> .row{ margin-top:40px; padding: 0 10px; } .clickable{ cursor: pointer; } .panel-heading div { margin-top: -18px; font-size: 15px; } .panel-heading div span{ margin-left:5px; } .panel-body{ display: none; } </style> <div class="container"> <div class="row"> <div class="col-md-8 col-sm-12 col-xs-12 col-md-offset-2"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Filter Employee Data</h3> <div class="pull-right" style="margin-top:-15px;"> <span class="clickable filter" data-toggle="tooltip" title="Toggle table filter" data-container="body"> <i class="glyphicon glyphicon-filter"></i> </span> </div> </div> <div class="panel-body"> <input type="text" class="form-control" id="dev-table-filter" data-action="filter" data-filters="#dev-table" placeholder="Filter Developers" /> </div> <table class="table table-hover" id="dev-table"> <thead> <tr> <th>S.No</th> <th>Name</th> <th>Employee ID</th> <th>Email ID</th> <th>Mobile</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Suresh</td> <td>EMP_0001</td> <td>sureshkumar@gmail.com</td> <td>9700900XX2</td> </tr> <tr> <td>2</td> <td>Ramesh</td> <td>EMP_0002</td> <td>rameshkumar@gmail.com</td> <td>9966463XX6</td> </tr> <tr> <td>3</td> <td>Naresh</td> <td>EMP_0003</td> <td>nareshkumar@gmail.com</td> <td>9666805XX2</td> </tr> <tr> <td>4</td> <td>Dinesh</td> <td>EMP_0004</td> <td>dineshkumar@gmail.com</td> <td>9890900XX7</td> </tr> <tr> <td>5</td> <td>Mahesh</td> <td>EMP_0005</td> <td>maheshkumar@gmail.com</td> <td>9702450XX3</td> </tr> </tbody> </table> </div> </div> </div> </div> <script type="text/javascript"> (function(){ 'use strict'; var $ = jQuery; $.fn.extend({ filterTable: function(){ return this.each(function(){ $(this).on('keyup', function(e){ $('.filterTable_no_results').remove(); var $this = $(this), search = $this.val().toLowerCase(), target = $this.attr('data-filters'), $target = $(target), $rows = $target.find('tbody tr'); if(search == '') { $rows.show(); } else { $rows.each(function(){ var $this = $(this); $this.text().toLowerCase().indexOf(search) === -1 ? $this.hide() : $this.show(); }) if($target.find('tbody tr:visible').size() === 0) { var col_count = $target.find('tr').first().find('td').size(); var no_results = $('<tr class="filterTable_no_results"><td colspan="'+col_count+'">No results found</td></tr>') $target.find('tbody').append(no_results); } } }); }); } }); $('[data-action="filter"]').filterTable(); })(jQuery); $(function(){ // attach table filter plugin to inputs $('[data-action="filter"]').filterTable(); $('.container').on('click', '.panel-heading span.filter', function(e){ var $this = $(this), $panel = $this.parents('.panel'); $panel.find('.panel-body').slideToggle(); if($this.css('display') != 'none') { $panel.find('.panel-body input').focus(); } }); $('[data-toggle="tooltip"]').tooltip(); }) </script> </body> </html>
×
Close
Bootstrap Filter, Bootstrap Data Filter - Free Time Learning
Sample Data
