Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

192
Views
Filter HTML table with dropdowns but using button to confirm

I have this code that life-filter the table using the dropdowns.

$(document).ready(function () {
        
            $('.filter').change(function () {
                var values = [];
        
                 $('.filter').each(function () {
                    var colIdx = $(this).data('col');
        
                     $(this).find('option:selected').each(function () {
                         if ($(this).val() != "") values.push( {
                            text: $(this).text(),
                            colId : colIdx
                         });
                    });
                });
                filter('table > tbody > tr', values);
            });
        
            function filter(selector, values) {console.log(values);
                $(selector).each(function () {
                    var sel = $(this);
                    var tokens = sel.text().trim().split('\n');
                    var toknesObj = [], i;
                    for(i=0;i<tokens.length;i++){
                        toknesObj[i] = {
                           text:tokens[i].trim(), 
                           found:false
                        };
                    }
        
                    var show = false;
                    //console.log(toknesObj);
                    $.each(values, function (i, val) {                
        
                   if (toknesObj[val.colId].text.search(new RegExp("\\b"+val.text+"\\b")) >= 0) {
                       toknesObj[val.colId].found = true;
                      }
        
                    });          
                    console.log(toknesObj);
                    var count = 0;
                     $.each(toknesObj, function (i, val) {
                         if (val.found){
                             count+=1;
                         }
                     });
                    show = (count === values.length);        
                    show ? sel.show() : sel.hide();
                });
            }
            });

I need a modification to use the same code but instead of life-filter, use a Search button to run the filter. Maybe the problem is the .change(function () but i'm not sure how to implement the way to use the search button instead of life-filter.

Thanks

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

By replacing the selector before the .change for a reference of the button and swapping the .change for a .click might work for your case.

$(document).ready(function () {  
  $('.button-selector').click(function () {
      ...
  });
  
  ...
});

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!