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

Post to Facebook Tweet this

<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"> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Work</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="normalize.css"> </head> <div class="row"> <div class="col-md-3"> <form action="#" method="get"> <div class="input-group"> <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> <br> <div class="col-md-9"> <table class="table table-list-search"> <h1>お願い一覧</h1> <div class="table-responsive"> <table class="table table-hover"> <thead> <tr align="center"> <th>名前</th> <th>タイトル</th> <th>種類</th> <th>内容</th> <th>いつまでに</th> <th>担当者</th> <th>ステータス</th> <th colspan="3"></th> </tr> </thead> <tbody> <% @works.each do |work| %> <tr> <td><%= work.user.name %></td> <td><%= work.title %></td> <td><%= work.kind %></td> <td><%= work.content %></td> <td><%= work.deadline.strftime("%Y年%m月%d日") %></td> <td><%= work.charge.name %></td> <td><%= work.status%></td> <% if work.charge.name == current_user.name%> <td><%= link_to '詳細を見る', work %></td> <td><%= link_to '編集する', edit_work_path(work) %></td> <td><%= link_to '削除する', work, method: :delete, data: { confirm: '本当に削除しますか' } %></td> <% end %> </tr> <% end %> </tbody> </table> <div class="content-footer"> <p> Page © - 2017 <br> Powered By <a href="https://www.facebook.com/tavo.qiqe.lucero" target="_blank"Agribook</a> </p> </div> </div> </div> </div>
body { margin-top: 2% } content .content-footer p { color: #6d6d6d; font-size: 12px; text-align: center; } .content .content-footer p a { color: inherit; font-weight: bold; }
$(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>'); } }); }); $(document).ready(function () { $('.star').on('click', function () { $(this).toggleClass('star-checked'); }); $('.ckbox label').on('click', function () { $(this).parents('tr').toggleClass('selected'); }); $('.btn-filter').on('click', function () { var $target = $(this).data('target'); if ($target != 'all') { $('.table tr').css('display', 'none'); $('.table tr[data-status="' + $target + '"]').fadeIn('slow'); } else { $('.table tr').css('display', 'none').fadeIn('slow'); } }); });

Related: See More

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

Questions / Comments: