"JS Table Filter simple insensitive"
Bootstrap 3.1.0 Snippet by sshelzi

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <p> Sistem za organiziranje na sostanoci </p> <br> <div class="container"> <div class="row"> <div class="col-md-3"> <form action="#" method="get"> <div class="input-group"> <!-- koristi input za prebaruvanje --> <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>User Name</th> <th>Title</th> <th>Date and time meeting</th> <th>Modul Studying</th> <th>Status </th> <th>Type of project </th> </tr> </thead> <tbody> <tr> <td>Dejan Dimitrov</td> <td>Meeting at</td> <td>12-11-2011 11:11</td> <td>IT</td> <td>Works </td> <td>Project abobout interfaces </td> </tr> <tr> <td>Aleskandar Jovanovski</td> <td>It</td> <td>11-20-2013 08:56</td> <td>It</td> <td>Works</td> <td>Another project about user interfaces</td> </tr> <tr> <td>Gordan Jovanov</td> <td>Project</td> <td>11-22-2013 08:56</td> <td>IT</td> <td>Works</td> <td>Project about organizing meetings</td> </tr> <tr> <td>Try</td> <td>Meeting at</td> <td>11-20-2013 08:56</td> <td>It</td> <td>Works</td> <td>Project about user interfaces</td> </tr> <tr> <td>Try</td> <td>Another Meeting at</td> <td>15-21-2013 08:56</td> <td>It-Internet and mobile tehcnologies</td> <td>Works</td> <td>Project about user interfaces</td> </tr> <tr> <td>Try</td> <td>Ss. Cyril and Methodius University in Skopje</td> <td>16-21-2013 08:56</td> <td>Internet and mobile technologies</td> <td>Works</td> <td>work for my university project at my profesor Suzana loshokovska</td> </tr> </tr> <tr> <td>Try</td> <td>At our another school meeting</td> <td>16-21-2013 08:56</td> <td>It</td> <td>Works for university project</td> <td>Do some FILTERME</td> </tr> <tr> <td>Dejan Jovanovski</td> <td>At our another school meeting</td> <td>16-21-2013 08:56</td> <td>It</td> <td>Works for university project</td> <td>Project about meetings</td> </tr> </tr> <tr> <td>Dejan Jovanovski</td> <td>Ss. Cyril and Methodius University in Skopje</td> <td>16-21-2013 08:56</td> <td>It</td> <td>Works for university project</td> <td>Project about meetings about the project and seminar work</td> </tr> </tr> <tr> <td>Dejan Jovanovski</td> <td>Ss. Cyril and Methodius University in Skopje</td> <td>16-21-2013 08:56</td> <td>It</td> <td>Works for university project</td> <td>Project about the university tournament</td> </tr> <tr> <td>Dejan Jovanovski 1</td> <td>Ss. Cyril and Methodius University in Skopje</td> <td>06-25-2014 08:56</td> <td>It</td> <td>Works for university project</td> <td>Project number 2 user interfaces</td> </tr> <tr> <td>Dejan Jovanovski 1</td> <td>Ss. Cyril and Methodius University in Skopje</td> <td>06-27-2014 08:56</td> <td>It</td> <td>Works for university project</td> <td>Project number 2 about the meetings</td> </tr> <tr> <td>Dejan Jovanovski 1</td> <td>Ss. Cyril and Methodius University in Skopje</td> <td>06-30-2014 08:56</td> <td>It</td> <td>Works for university project</td> <td>Project number 2 about the meetings</td> </tr> <tr> <td>Dejan Dimitrov</td> <td>Ss. Cyril and Methodius University in Skopje</td> <td>06-31-2014 08:56</td> <td>It modul</td> <td>Works for university project</td> <td>Project number 2 about the meetings</td> </tr> <tr> <td>Dejan Jovanovski 13579</td> <td>Ss. Cyril and Methodius University in Skopje</td> <td>06-31-2014 08:56</td> <td>It modul studying </td> <td>Works for university project</td> <td>Project number 2 about the meetings</td> </tr> <tr> <td>Dejan Jovanovski 13579</td> <td>Ss. Cyril and Methodius University in Skopje </td> <td>06-31-2014 08:56</td> <td>It modul studying </td> <td>Works for university project</td> <td>Project number 2 about the meetings in </td> </tr> <tr> <td>Dejan Jovanovski 13579</td> <td>Ss. Cyril and Methodius University in Skopje</td> <td>06-31-2014 08:56</td> <td>It modul studying </td> <td>Works for university project</td> <td>Project number 2 about the meetings in </td> </tr> <tr> <td>Dejan Jovanovski 13579</td> <td>Ss. Cyril and Methodius University in Skopje </td> <td>07-01-2014 08:56</td> <td>It modul studying ,internet and mobile technology </td> <td>Works for university project</td> <td>Project number 2 about the meetings </td> </tr> <tr> <td>Dejan Jovanov</td> <td>Ss. Cyril and Methodius University in Skopje </td> <td>07-01-2014 08:56</td> <td>It modul studying ,internet and mobile technology </td> <td>Works for university project</td> <td>Project number 2 about the meetings in 4-th semestar </td> </tr> <tr> <td>Dejan Jovanov</td> <td>Ss. Cyril and Methodius University in Skopje </td> <td>07-01-2014 08:56</td> <td>It modul studying ,internet and mobile technology at faculty of computer science and engineering </td> <td>Works for university project</td> <td>Project number 2 about the meetings in 4-th semestar </td> </tr> <tr> <td>Marjan Mitrevski</td> <td>Ss. Cyril and Methodius University in Skopje </td> <td>07-02-2014 08:56</td> <td>It modul studying ,internet and mobile technology at faculty of computer science and engineering </td> <td>Works for university project</td> <td>Project number 2 about the meetings in 4-th semestar </td> </tr> <tr> <td>jovan Mitrevski</td> <td>Ss. Cyril and Methodius University in Skopje </td> <td>07-02-2014 08:56</td> <td>It modul studying ,internet and mobile technology at faculty of computer science and engineering </td> <td>Works for university project</td> <td>Project number 2 about the meetings in 4-th semestar </td> </tr> <tr> <td>jovan Mitrevski</td> <td> Ss. Cyril and Methodius University in Skopje </td> <td>07-02-2014 08:56</td> <td>It modul studying ,internet and mobile technology at faculty of computer science and engineering </td> <td>Works for university project</td> <td>Project number 2 about the meetings in 4-th semestar </td> </tr> </tbody> </table> </div> </div> </div>
body { margin-top: 5% } td { color:black; } p{ color:red; text-align:center }
$(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: