Toggle navigation
TUTORIALS
Computers Basics
HTML
HTML5
CSS
CSS3
SEO
Bootstrap 3
Bootstrap 4
Materialize CSS
JavaScript
jQuery
Ajax
AngularJS
C - Language
Java
PHP
Python
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
QUIZ
INTERVIEW QUESTIONS
COMPETITIVE EXAMS
Today Current Affairs
Monthly Current Affairs
Today GK
General Knowledge
Verbal Ability
Mental Ability
UPSC
UPSC Previous Questions
UPSC 2021 Questions
UPSC 2020 Questions
UPSC 2019 Questions
BLOG
MORE
IPC Sections
New
School Mathematics
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
