<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 ----------> <div class="container"> <h1>Click the filter icon <small>(<i class="glyphicon glyphicon-filter"></i>)</small></h1> <div class="row"> <div class="col-md-13"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Region Details</h3> <div class="pull-right"> <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 Regionss" /> </div> <table class="table table-hover" id="dev-table"> <thead> <tr> <th>Release</th> <th>Region</th> <th>Profile</th> <th>URL</th> <th>Server</th> <th>User ID</th> <th>Password</th> </tr> </thead> <tbody> <tr> <td>Release 1</td> <td>fnsonlkd(QA Promoter)</td> <td>TEST</td> <td><a href="http://10.17.73.224:9093/NBL/LoginNew.action" target="_blank">http://10.17.73.224:9093/NBL/LoginNew.action</a></td> <td>10.17.73.224</td> <td>readonly</td> <td>NewPass@123</td> </tr> <tr> <td>Release 1</td> <td>fnsonlzd</td> <td>ZionsSanity</td> <td ><a href="http://10.17.73.237:9092/NBL/OpenLoginNew.jsp" target="_blank">http://10.17.73.237:9092/NBL/OpenLoginNew.jsp</a></td> <td>10.17.73.237</td> <td>was8</td> <td>Was@2017</td> </tr> <tr> <td>Release 1.1</td> <td>fnsonldd(QA Promoter )</td> <td>ZiraatQA</td> <td><a href="http://10.17.73.236:9083/NBL/LoginNew.action" target="_blank">http://10.17.73.236:9083/NBL/LoginNew.action</a></td> <td>10.17.73.236</td> <td>readonly</td> <td>NewPass@123</td> </tr> <tr> <td>Release 1.1</td> <td>zionstest</td> <td>ZIONSTEST1</td> <td><a href="http://10.17.73.211:9096/NBL/OpenLoginNew.jsp" target="_blank">http://10.17.73.211:9096/NBL/OpenLoginNew.jsp</a></td> <td>10.17.73.211</td> <td>zionstest</td> <td>NewUser#123</td> </tr> <tr> <td>Release 2 </td> <td>fnsonljj QA (Promoter)</td> <td>ZIONSQA6</td> <td><a href="http://10.17.73.224:9253/NBL/LoginNew.action" target="_blank">http://10.17.73.224:9253/NBL/LoginNew.action</a></td> <td>10.17.73.224</td> <td>readonly</td> <td>NewPass@123</td> </tr> <tr> <td>Release 2 </td> <td>fnsonlll (P5)</td> <td>ZIONS_DEV</td> <td><a href="http://10.17.73.224:9233/NBL/LoginNew.action" target="_blank">http://10.17.73.224:9233/NBL/LoginNew.action</a></td> <td>10.17.73.224</td> <td>fnsonlll</td> <td>R2_fnsonlll_2017</td> </tr> <tr> <td>Release 2 </td> <td>NBL_ZionsR2_DEV</td> <td>NBL_ZionsR2_DEV</td> <td><a href="https://10.17.73.211:58125/NBL/LoginNew.jsp" target="_blank">https://10.17.73.211:58125/NBL/LoginNew.jsp</a></td> <td>10.17.73.211</td> <td>nbl_zr2_dev</td> <td>Dev@2017</td> </tr> <tr> <td>Release 2 </td> <td>NBL_ZionsR2_QA</td> <td>NBL_ZionsR2_QA</td> <td><a href="https://10.17.73.211:58126/NBL/LoginNew.jsp" target="_blank">https://10.17.73.211:58126/NBL/LoginNew.jsp</a></td> <td>10.17.73.211</td> <td>nbl_zr2_qa</td> <td>R2_qa_2017</td> </tr> <tr> <td>Release 2 </td> <td>NBL_ZionsR2_QA1</td> <td>NBL_ZionsR2_QA1</td> <td><a href="https://10.17.73.211:58127/NBL/LoginNew.jsp" target="_blank">https://10.17.73.211:58127/NBL/LoginNew.jsp</a></td> <td>10.17.73.211</td> <td>nbl_zr2_qa1</td> <td>R2_qa1_2017</td> </tr> </tbody> </table> </div> </div> <div class="col-md-8"> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">Additional Details</h3> <div class="pull-right"> <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="task-table-filter" data-action="filter" data-filters="#task-table" placeholder="Filter Additional Details" /> </div> <table class="table table-hover" id="task-table"> <thead> <tr> <th>Region</th> <th>Console URL</th> <th>User ID</th> <th>Password</th> </tr> </thead> <tbody> <tr> <td>fnsonlkd(QA Promoter)</td><td><a href="https://10.17.73.224:9058/ibm/console" target="_blank">https://10.17.73.224:9058/ibm/console</a></td> <td>fnsonlaa</td> <td>Password#456</td> </tr> <tr> <td>fnsonlzd</td> <td><a href="https://10.17.73.237:9055/ibm/console" target="_blank">https://10.17.73.237:9055/ibm/console</a></td> <td>-</td> <td>-</td> </tr> <tr> <td>fnsonldd(QA Promoter)</td><td><a href="https://10.17.73.236:9046/ibm/console" target="_blank">https://10.17.73.236:9046/ibm/console</a></td> <td>fnsonldd</td> <td>P@ssw0rd@678</td> </tr> <tr> <td>zionstest</td> <td><a href="https://10.17.73.211:9059/ibm/console" target="_blank">https://10.17.73.211:9059/ibm/console</a></td> <td>zionstest</td> <td>zionstest</td> </tr> <tr> <td>fnsonlll</td><td><a href="https://10.17.73.224:9231/ibm/console/logon.jsp" target="_blank">https://10.17.73.224:9231/ibm/console/logon.jsp</a></td> <td>fnsonlll</td> <td>Password#456</td> </tr> </tbody> </table> </div> </div> </div> </div>

.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; }

/** * I don't recommend using this plugin on large tables, I just wrote it to make the demo useable. It will work fine for smaller tables * but will likely encounter performance issues on larger tables. * * <input type="text" class="form-control" id="dev-table-filter" data-action="filter" data-filters="#dev-table" placeholder="Filter Developers" /> * $(input-element).filterTable() * * The important attributes are 'data-action="filter"' and 'data-filters="#table-selector"' */ (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(); })