jQuery Filter Table

In this article, we learn the functionality of how to filter a data from table with the use of jQuery.

Following are the examples of jquery filtered table.

Example 1:

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of jQuery Filter Table </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jquery.com/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>  
h2 {  
  margin-top: 40px;  
  text-transform: none;  
  font-size: 1.75em;  
  font-weight: bold;  
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;  
  color: white;   
  letter-spacing: -0.005em;   
  word-spacing: 1px;  
  letter-spacing: none;  
  text-align: center;  
}  
h4 {  
  margin-top: 40px;  
  text-transform: none;  
  font-size: 1.75em;  
  font-weight: bold;  
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;  
  color: #999;   
  letter-spacing: -0.005em;   
  word-spacing: 1px;  
  letter-spacing: none;  
  text-align: center;  
  color: white;  
}  
#user-banner .user-text {
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(10,21,28,1) 100%); 
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(10,21,28,1) 100%);
	background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(10,21,28,1) 100%); 
}
#user-banner .user-text h2 {
	font-family: 'open_sansbold';
	color: #ffffff;
	font-size: 40px;
	text-transform: uppercase;
	text-shadow: 1px 3px 1px #000000;
}
#user-banner .user-text p {
color: #fff;
} 
#user-account-content {
padding: 25px 0px; }
#user-account-content .list-group-item.disabled {
    background-color: #e8206a;
    color: #ffffff;
    cursor: not-allowed;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}
#user-account-content .list-group-item.disabled:focus {
    background-color: #e8206a;
    color: #ffffff;
    cursor: not-allowed;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}
#user-account-content .list-group-item.disabled:hover {
    background-color: #e8206a;
    color: #ffffff;
    cursor: not-allowed;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}

#user-account-content a.list-group-item { transition: all 0.3s ease-out; }
#user-account-content .list-group-item.active {
    background: #009dbf none repeat scroll 0 0;
    text-shadow: 0 -1px 0 #286090;
	border:none;
}
#user-account-content .list-group-item.active:focus {
    background: #009dbf none repeat scroll 0 0;
    text-shadow: 0 -1px 0 #286090;
	border: none;
}
#user-account-content .list-group-item.active:hover {
    background: #009dbf none repeat scroll 0 0;
    text-shadow: 0 -1px 0 #286090;
	border: none;
}

#user-account-content a.list-group-item:focus {
    background-color: #f89921;
    color: #fff;
    text-decoration: none;
	padding-left: 25px;
    text-transform: uppercase;
    text-decoration: none;
}
#user-account-content a.list-group-item:hover {
    background-color: #f89921;
    color: #fff;
    text-decoration: none;
	padding-left: 25px;
    text-transform: uppercase;
    text-decoration: none;
}

#user-account-content button.list-group-item:focus {
    background-color: #f89921;
    color: #fff;
    text-decoration: none;
	padding-left: 25px;
    text-transform: uppercase;
    text-decoration: none;
}

#user-account-content button.list-group-item:hover {
    background-color: #f89921;
    color: #fff;
    text-decoration: none;
	padding-left: 25px;
    text-transform: uppercase;
    text-decoration: none;
}

.filterable .panel-heading .pull-right {
    margin-top: -20px;
}
.filterable .filters input[disabled] {
    background-color: transparent;
    border: none;
    cursor: auto;
    box-shadow: none;
    padding: 0;
    height: auto;
}
.filterable .filters input[disabled]::-webkit-input-placeholder {
    color: #333;
}
.filterable .filters input[disabled]::-moz-placeholder {
    color: #333;
}
.filterable .filters input[disabled]:-ms-input-placeholder {
    color: #333;
}
.panel-default>.panel-heading {
	background-image: none;
    background-color: #f5f5f5 !important;
}
.btn-success {
    color: #fff;
	background-image: none;
    background-color: #5cb85c !important;
    border-color: #4cae4c;
	box-shadow: none;
	text-shadow: none;
}
.btn-danger {
	background-image: none;
    background-color: #d9534f !important;
    border-color: #d43f3a;
    color: #fff;
	box-shadow: none;
	text-shadow: none;
}
.btn-pink {
	background-color: #e8206a;
	color: #ffffff;
	text-shadow: none;
	border-radius: 0px;
}
.btn-primary {
	background-image: none;
    background-color: #337ab7 !important;
    border-color: #2e6da4;
    color: #fff;
	box-shadow: none;
	text-shadow: none;
}
</style>
<body>
<h2> Example </h2>
<h4> Jquery Filterd table </h4>
<div class="col-md-9">
        <div class = "row">
          <div class = "panel panel-default panel-table filterable">
            <div class = "panel-heading">
              <div class = "row">
                <div class = "col col-xs-6 text-right">
                   <div class = "btn-group">
                    <button type = "button" class = "btn btn-primary btn-filter" data-target="all"> All </button>
                    <button type = "button" class = "btn btn-success btn-filter" data-target = "verifed"> Verifed </button>
                    <button type = "button" class = "btn btn-danger btn-filter" data-target = "not-verifed"> Not Verifed </button>
                  </div>
                </div>
              </div>
            </div>
            <div class = "panel-body">
              <table class = "table table-bordered table-hover text-center">
                <thead>
                <tr class = "filters">   
                 <th> <input type = "text" class = "form-control" placeholder = "Order Id" disabled> </th>
                  <th> <input type = "text" class = "form-control" placeholder = "Packages" disabled> </th>
                   <th> <input type = "text" class = "form-control" placeholder = "Amount" disabled> </th>
                    <th> <input type = "text" class = "form-control" placeholder = "Order Date" disabled></th>
                     <th> <input type = "text" class = "form-control" placeholder = "Status" disabled> </th>                     
                  </tr>
                    </thead>
                <tbody id = "user">
                  <tr data-status = "not-verifed">
                    <td> <a href = "#"> 20160824-1 </a> </td>
                    <td> <span> Logo Packages</span> - Startup Logo </td>
                    <td>75</td>
                    <td>24/August/2016</td>
                    <td><span class="label label-danger">Not Verifed</span></td>
                    
                  </tr>
                  <tr data-status="verifed">
                    <td><a href="#">20160824-2</a></td>
                    <td><span>Logo Packages</span> - Startup Logo </td>
                    <td>75</td>
                    <td>24/August/2016</td>
                    <td><span class="label label-success">Verifed</span></td>
                    <td><a href="#">-</a></td>
                    <td><a href="#" data-related="title_2" class="user-id btn btn-pink btn-block"><i class="fa fa-edit"></i></a> </td>
                  </tr>
                  <tr data-status="verifed">
                    <td><a href="#">20160824-3</a></td>
                    <td><span>Logo Packages</span> - Startup Logo </td>
                    <td>75</td>
                    <td>24/August/2016</td>
                    <td><span class="label label-success">Verifed</span></td>
                    <td><a href="#">-</a></td>
                    <td><a href="#" data-related="title_3" class="user-id btn btn-pink btn-block"><i class="fa fa-edit"></i></a></td>
                  </tr>
                  <tr data-status="not-verifed">
                    <td><a href="#">20160824-4</a></td>
                    <td><span>Logo Packages</span> - Startup Logo </td>
                    <td>75</td>
                    <td>24/August/2016</td>
                    <td><span class="label label-danger">Not Verifed</span></td>
           
                  </tr>
                  <tr data-status="verifed">
                    <td><a href="#">20160824-5</a></td>
                    <td><span>Logo Packages</span> - Startup Logo </td>
                    <td>75</td>
                    <td>24/August/2016</td>
                    <td><span class="label label-success">Verifed</span></td>
                    <td><a href="#">-</a></td>
                    <td><a href="#" data-related="title_5" class="user-id btn btn-pink btn-block"><i class="fa fa-edit"></i></a></td>
                  </tr>
                </tbody>
                
              </table>
            </div>
            <!-- // end panel body -->
            <div class="panel-footer">
               <nav aria-label="Page navigation">
  <ul class="pagination" id="myPager">
    
  </ul>
</nav>
            </div> 
            
          </div>
        </div>
                 <script>
$("div.user-content").each(function(){
     $(this).hide();
   if($(this).attr('id') == 'main') {
        $(this).show();
   }
});
$('.user-id').on( "click", function(e) {
    e.preventDefault();
    var id = $(this).attr('data-related'); 
    $("div.user-content").each(function(){
        $(this).hide();
        if($(this).attr('id') == id) {
            $(this).show();
			
        }
    });
});

$(document).ready(function () {
    $('.btn-filter').on('click', function () {
      var $target = $(this).data('target');
      if ($target != 'all') {
        $('tbody tr').css('display', 'none');
        $('tbody tr[data-status="' + $target + '"]').fadeIn('slow');
      } else {
        $('tbody tr').css('display', 'none').fadeIn('slow');
      }
    });
 });
 $.fn.pageMe = function(opts){
    var $this = this,
        defaults = {
            perPage: 7,
            showPrevNext: false,
            hidePageNumbers: false
        },
        settings = $.extend(defaults, opts);
    var listElement = $this;
    var perPage = settings.perPage; 
    var children = listElement.children();
    var pager = $('.pager');
    if (typeof settings.childSelector!="undefined") {
        children = listElement.find(settings.childSelector);
    }
    if (typeof settings.pagerSelector!="undefined") {
        pager = $(settings.pagerSelector);
    } 
    var numItems = children.size();
    var numPages = Math.ceil(numItems/perPage);

    pager.data("curr",0);
    
    if (settings.showPrevNext){
        $('<li><a href="#" class="prev_link">?</a></li>').appendTo(pager);
    }
    
    var curr = 0;
    while(numPages > curr && (settings.hidePageNumbers==false)){
        $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager);
        curr++;
    }
    
    if (settings.showPrevNext){
        $('<li><a href="#" class="next_link">?</a></li>').appendTo(pager);
    }
    
    pager.find('.page_link:first').addClass('active');
    pager.find('.prev_link').hide();
    if (numPages<=1) {
        pager.find('.next_link').hide();
    }
      pager.children().eq(1).addClass("active");
    
    children.hide();
    children.slice(0, perPage).show();
    
    pager.find('li .page_link').click(function(){
        var clickedPage = $(this).html().valueOf()-1;
        goTo(clickedPage,perPage);
        return false;
    });
    pager.find('li .prev_link').click(function(){
        previous();
        return false;
    });
    pager.find('li .next_link').click(function(){
        next();
        return false;
    });
    
    function previous(){
        var goToPage = parseInt(pager.data("curr")) - 1;
        goTo(goToPage);
    }
     

    function next(){
        goToPage = parseInt(pager.data("curr")) + 1;
        goTo(goToPage);
    }
    
    function goTo(page){
        var startAt = page * perPage,
            endOn = startAt + perPage;
        
        children.css('display','none').slice(startAt, endOn).show();
        
        if (page>=1) {
            pager.find('.prev_link').show();
        }
        else {
            pager.find('.prev_link').hide();
        }
        
        if (page<(numPages-1)) {
            pager.find('.next_link').show();
        }
        else {
            pager.find('.next_link').hide();
        }
        
        pager.data("curr",page);
      	pager.children().removeClass("active");
        pager.children().eq(page+1).addClass("active");
    
    }
};

$(document).ready(function(){  $('#user').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:3});    
});
$(document).ready(function(){
    $('.filterable .btn-filter1').click(function(){
        var $panel = $(this).parents('.filterable'),
        $filters = $panel.find('.filters input'),
        $tbody = $panel.find('.table tbody');
        if ($filters.prop('disabled') == true) {
            $filters.prop('disabled', false);
            $filters.first().focus();
        } else {
            $filters.val('').prop('disabled', true);
            $tbody.find('.no-result').remove();
            $tbody.find('tr').show();
        }
    });

    $('.filterable .filters input').keyup(function(e){
        var code = e.keyCode || e.which;
        if (code == '9') return;
        var $input = $(this),
        inputContent = $input.val().toLowerCase(),
        $panel = $input.parents('.filterable'),
        column = $panel.find('.filters th').index($input.parents('th')),
        $table = $panel.find('.table'),
        $rows = $table.find('tbody tr');
        var $filteredRows = $rows.filter(function(){
            var value = $(this).find('td').eq(column).text().toLowerCase();
            return value.indexOf(inputContent) === -1;
        });
        $table.find('tbody .no-result').remove();
        $rows.show();
        $filteredRows.hide();
        if ($filteredRows.length === $rows.length) {
            $table.find('tbody').prepend($('<tr class="no-result text-center"><td colspan="'+ $table.find('.filters th').length +'">No result found</td></tr>'));
        }
    });
});
</sript>
</body>
</html>

Explanation:

In the above example, we have created an example of jquery filtered table. In this we filter the data according to the verified and not verified status.

Output:

Following is the output of this example.

Example 2:

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of jQuery Filter Table </title>  
        <meta name = "description">  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jquery.com/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>  
h2 {  
  margin-top: 40px;  
  text-transform: none;  
  font-size: 1.75em;  
  font-weight: bold;  
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;  
  color: white;   
  letter-spacing: -0.005em;   
  word-spacing: 1px;  
  letter-spacing: none;  
  text-align: center;  
}  
h4 {  
  margin-top: 40px;  
  text-transform: none;  
  font-size: 1.75em;  
  font-weight: bold;  
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;  
  color: #999;   
  letter-spacing: -0.005em;   
  word-spacing: 1px;  
  letter-spacing: none;  
  text-align: center;  
  color: white;  
}  
body {
  background: #ddd;
  font-family: sans-serif;
}
.container {
  margin: 20px 0 20px 0;
}
.table-filter {
  margin-bottom: 5px;
}
table {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.05),
    0px 20px 20px rgba(0, 0, 0, 0.05), 0px 30px 20px rgba(0, 0, 0, 0.05);
}
th {
  color: #ffffff;
  background: #39a2fb;
  font-weight: 700;
}
tr {
  background: #fff;
}
tr:hover {
  background: #f4f4f4;
}
th {
  padding: 5px 5px 5px 10px;
}
td {
  padding: 5px 5px 5px 10px;
}
td  {
  word-wrap: break-word;
  border-bottom: 1px solid #ccc;
}
</style>
<body>
<section class = "container">
<h2> Example </h2>
<h4> Jquery filter table </h4>
  <input  type = "search"
    class = "form-control table-filter"
    placeholder = "Search..."
  />
  <div class = "table-responsive">
    <table role = "table" class = "table filtered-table">
      <thead role = "rowgroup">
        <tr role = "row">
          <th role = "columnheader"> First name </th>
          <th role = "columnheader"> Last name </th>
          <th role = "columnheader"> Job title </th>
        <th role = "columnheader"> Email</th>
<th role = "columnheader"> Username </th>
          <th role = "columnheader"> Location </th>
          <th role = "columnheader">  Birthday </th>
        </tr>
      </thead>
      <tbody role = "rowgroup">
        <tr role = "row">
          <td role = "cell"> John </td>
          <td role = "cell"> Smith </td>
          <td role = "cell"> Product owner </td>
          <td role = "cell"> john.smith@codepen.io </td>
          <td role = "cell"> JohnSmith </td>
          <td role = "cell"> Spain </td>
          <td role = "cell"> January 21, 1984 </td>
        </tr>
                <tr role = "row">
          <td role = "cell"> John </td>
          <td role = "cell"> Smith </td>
          <td role = "cell"> Product owner </td>
          <td role = "cell"> john.smith@codepen.io </td>
          <td role = "cell"> JohnSmith </td>
          <td role = "cell"> Spain </td>
          <td role = "cell"> January 21, 1984 </td>
        </tr>
                <tr role = "row">
          <td role = "cell"> John </td>
          <td role = "cell"> Smith </td>
          <td role = "cell"> Product owner </td>
          <td role = "cell"> john.smith@codepen.io </td>
          <td role = "cell"> JohnSmith </td>
          <td role = "cell"> Spain </td>
          <td role = "cell"> January 21, 1984 </td>
        </tr>
                <tr role = "row">
          <td role = "cell"> John </td>
          <td role = "cell"> Smith </td>
          <td role = "cell"> Product owner </td>
          <td role = "cell"> john.smith@codepen.io </td>
          <td role = "cell"> JohnSmith </td>
          <td role = "cell"> Spain </td>
          <td role = "cell"> January 21, 1984 </td>
        </tr>
        <tr role = "row">
          <td role = "cell"> John </td>
          <td role = "cell"> Smith </td>
          <td role = "cell"> Product owner </td>
          <td role = "cell"> john.smith@codepen.io </td>
          <td role = "cell"> JohnSmith </td>
          <td role = "cell"> Spain </td>
          <td role = "cell"> January 21, 1984 </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
(function ($) {
  'use strict';
  $(document).ready(function () {
    $('.table-filter').on('input', function () {
      var value = $(this).val().toLowerCase();
      $('.filtered-table tbody tr').filter(function () {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
      });
    });
  });
})(window.jQuery);
</script>
</body>
</html>

Explanation:

In the above example, we have created an example of jquery filtered table. In this we filter the data according to the names.

Output:

Following is the output of this example.