jQuery function filter table multi input

Question

I have this script for filter table: (change this script into function)

$(document).ready(function(){
  var $rows = $('tbody > tr'),
  $filters = $('#tableP input');
  $filters.on("keyup", function () {
    var $i = $filters.filter(function () {
        return $.trim(this.value).length > 0;
    }),
    len = $i.length;
    
    if (len === 0) return $rows.show();
    var cls = '.' + $i.map(function () {
        return this.className
    }).get().join(',.');
    
    $rows.hide().filter(function () {
        return $('td', this).filter(cls).filter(function() {
            var content = this.textContent.toLowerCase(),
                inputVal = $i.filter('.' + this.className).val().toLowerCase();
            return content.indexOf(inputVal) > -1;
        }).length === len;
    }).show();
  });  
});




   
      
        
            
        
        
            
        
        
            
        
       
  
  
    
      Carlo
      Grasso
      Italia
    
    
      Giuseppe
      Puglisi
      Italia
    
    
      Franc
      Justin
      Francia

This works! I want to create a function to call in the input tag, I do not know how to do it. I want to create a function to call in the input tag, I do not know how to do it.

I want to create function in tag input onkeyup myFilter(), how can I do? Can someone help me?

Calvin Nunes · Accepted Answer

Here's an option:

Add a property to identify the inputs that you want to use to call the function, in my example I added the property data-filter="true"

When you start your script, add the listener to those inputs which have that attribute, and get it's parent

, using closest(...) (Documentation)

Inside the function, make sure to find just the elements that is children of that table, using $(table).find()

That's it, check below if this helps you

$(document).ready(function(){

  $("input[data-filter='true']").on("keydown", function(){
    let parentTable = this.closest('.table-filtered');
    myTableFilter(parentTable);
  });  

  function myTableFilter(table){
    let $rows = $(table).find('tbody > tr');    
    let $filters = $(table).find('input');
    $filters.on("keyup", function () {
      var $i = $filters.filter(function () {
          return $.trim(this.value).length > 0;
      });
      var len = $i.length;
      
      if (len === 0) return $rows.show();
      var cls = '.' + $i.map(function () {
          return this.className;
      }).get().join(',.');
      
      $rows.hide().filter(function () {
          return $('td', this).filter(cls).filter(function() {
              var content = this.textContent.toLowerCase(),
                  inputVal = $i.filter('.' + this.className).val().toLowerCase();
              return content.indexOf(inputVal) > -1;
          }).length === len;
      }).show();
    }); 
  }
});

#tableP{
  border: 1px solid blue;
}

#tableP2{
  border: 1px solid red;
}


Carlo	Grasso	Italia
Giuseppe	Puglisi	Italia
Franc	Justin	Francia

Basically, What I added is this part:

$("input[data-filter='true']").on("keydown", function(){
    let parentTable = this.closest('.table-filtered');
    myTableFilter(parentTable);
 });

And inside your function I added the $(table).find(...) where it was needed.

jQuery function filter table multi input

Answers (1)

Related Questions