"JS Table Filter simple insensitive"
Bootstrap 3.0.0 Snippet by Cyruxx

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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"> <div class="row"> <div class="col-md-3"> <form action="#" method="get"> <div class="input-group"> <!-- USE TWITTER TYPEAHEAD JSON WITH API TO SEARCH --> <input class="form-control" id="system-search" name="q" placeholder="Search for" required> <span class="input-group-btn"> <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button> </span> </div> </form> </div> <div class="col-md-9"> <table class="table table-list-search"> <thead> <tr> <th>Entry</th> <th>Entry</th> <th>Entry</th> <th>Entry</th> <th>Entry</th> <th>Entry</th> </tr> </thead> <tbody> <tr> <td>Sample</td> <td>Filter</td> <td>12-11-2011 11:11</td> <td>OK</td> <td>123</td> <td>Do some other</td> </tr> <tr> <td>Try</td> <td>It</td> <td>11-20-2013 08:56</td> <td>It</td> <td>Works</td> <td>Do some FILTERME</td> </tr> <tr> <td>§</td> <td>$</td> <td>%</td> <td>&</td> <td>/</td> <td>!</td> </tr> </tbody> </table> </div> </div> </div>
body { margin-top: 2% }
$(document).ready(function() { var activeSystemClass = $('.list-group-item.active'); //something is entered in search form $('#system-search').keyup( function() { var that = this; // affect all table rows on in systems table var tableBody = $('.table-list-search tbody'); var tableRowsClass = $('.table-list-search tbody tr'); $('.search-sf').remove(); tableRowsClass.each( function(i, val) { //Lower text for case insensitive var rowText = $(val).text().toLowerCase(); var inputText = $(that).val().toLowerCase(); if(inputText != '') { $('.search-query-sf').remove(); tableBody.prepend('<tr class="search-query-sf"><td colspan="6"><strong>Searching for: "' + $(that).val() + '"</strong></td></tr>'); } else { $('.search-query-sf').remove(); } if( rowText.indexOf( inputText ) == -1 ) { //hide rows tableRowsClass.eq(i).hide(); } else { $('.search-sf').remove(); tableRowsClass.eq(i).show(); } }); //all tr elements are hidden if(tableRowsClass.children(':visible').length == 0) { tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="6">No entries found.</td></tr>'); } }); });

Related: See More


Questions / Comments:

hi, Im using your code to search data that will be stored in the tables however im confused on how to add the JS script

any help would be appreciated ,can you send a me the full code in a html format on gaurav303ahuja@gmail.com

Gaurav Ahuja () - 7 years ago - Reply 0


i want js table filter simple coding to my gmail "mayurdevalkar56@gmail.com"

mayur devalkar () - 7 years ago - Reply 0


Is it possible to add something like a loadbar during the search?

reicheto () - 9 years ago - Reply 0


I have it running on a table with 600 rows and it slow as whatever. Any ideas? Running chrome

Yannik () - 10 years ago - Reply 0


You probably have to set a minimum to trigger the search only if you've entered at least 2 or more characters.

If you don't know how, message me.

Alex () - 10 years ago - Reply 0


Also this is very slow on IE 8

Sunil () - 10 years ago - Reply 0


Well, don't use IE 8... Just kidding, it's jQuery, I think jQuery is always slow on IE 8, right? :-)

Alex () - 10 years ago - Reply 0


what if I need to search giving multiple column criteria

Sunil () - 10 years ago - Reply 0


how can I make this work with click on tags instead of submitting in a search box ?

Jo () - 10 years ago - Reply 0


It's not that easy without javascript knowledge.

Alex () - 10 years ago - Reply 0


Awesome work. Will this work for paginated tables?

Adam Rodriguez () - 11 years ago - Reply 0


Will this work for paginated tables?

Guest () - 11 years ago - Reply 0


It works. But you have to change some javascript. - Nothing for just copy&paste!

Alex () - 11 years ago - Reply 0


please show me paginated tables

aykut () - 9 years ago - Reply 0


Hey Cyruxx, can you make this work with your dropdown userlist that u have made? Thank you so much :)

Alanox () - 10 years ago - Reply 0


Hey, great idea, I will have a look at it. :)

Alex () - 10 years ago - Reply 0


great. can you some date range filtering to?

Ikhsan () - 11 years ago - Reply 0


Mail me - info@veecu.de

Alex () - 11 years ago - Reply 0


Great work! Would have been awesome if it had a sorting option too on the table headings

Aman () - 11 years ago - Reply 0


Actually, I did an table sorting too. I did not share this. If you want it - mail me at info@veecu.de :)

Alex () - 11 years ago - Reply 0