JQuery Table Filter on Multiple Criteria

Question

Hi Everyone,

I currently have a table with three drop down lists above it. As the user selects a value from each drop down to filter the results I'd like the table to hide the rows that do not fit ALL of the criteria selected so far. The closest I have gotten is this:

  $("#ReportControls #InventoryReports select").change(function(){

    $("#Report table tbody tr").hide();  

    var filterArray = new Array();
    filterArray[0] = $("#ddlStyle :selected").text()
    filterArray[1] = $("#ddlSize :selected").text()
    filterArray[2] = $("#ddlColor :selected").text()

    $.each(filterArray, function(i){
        if (filterArray[i].toString() != "Style" && filterArray[i].toString() != "Size" && filterArray[i].toString() != "Color")
        {
           $("#Report table tbody tr").find("td:contains('" + filterArray[i].toString() + "')").parents("tr").show();
        }
    });
});

The only issue with it is that it pulls back all rows that contain a certain size or a certain color or a certain style instead of just rows that are a certain size AND a certain color AND a certain style. Thanks in advance for your help!

Jon

Answer 1

Instead of

    $.each(filterArray, function(i){
    if (filterArray[i].toString() != "Style" && filterArray[i].toString() != "Size" && filterArray[i].toString() != "Color")
    {
       $("#Report table tbody tr").find("td:contains('" + filterArray[i].toString() + "')").parents("tr").show();
    }
});

Have you tried:

var bolPass = true;
$.each(filterArray, function(i){
if (filterArray[i].toString() == "Style" || filterArray[i].toString() == "Size" || filterArray[i].toString() == "Color") 
  {
  bolPass = false
  }
});
if (bolPass) 
  {
  $("#Report table tbody tr").find("td:contains('" + filterArray[0].toString() + "')").find("td:contains('" + filterArray[1].toString() + "')").find("td:contains('" + filterArray[2].toString() + "')").parents("tr").show();
  }

I think that may give you what you are looking for.

Answer 2

In that case:

$.each(filterArray, function(i){
if (filterArray[i].toString() == "Style" || filterArray[i].toString() == "Size" || filterArray[i].toString() == "Color") 
  {
  filterArray[i] == ""
  }
});
$("#Report table tbody tr").find("td:contains('" + filterArray[0].toString() + "')").find("td:contains('" + filterArray[1].toString() + "')").find("td:contains('" + filterArray[2].toString() + "')").parents("tr").show();

It will always find a blank.

Answer 3

Jeff, thanks for all of your help. For some reason I couldn't get that to filter correctly. It always came back with no rows. The final code that got it to work is:

$("#ReportControls #InventoryReports select").change(function(){

    $("#Report table tbody tr").hide();          
    var filterArray = new Array();
    filterArray[0] = $("#ddlStyle :selected").text()
    filterArray[1] = $("#ddlSize :selected").text()
    filterArray[2] = $("#ddlColor :selected").text()

    $.each(filterArray, function(i){
        if (filterArray[i].toString() == "Style" || filterArray[i].toString() == "Size" || filterArray[i].toString() == "Color")
        {
            filterArray[i] = "";
        }
    });   
    $("#Report table tbody tr").each(function(){
        if ($(this).find("td:eq(0):contains('" + filterArray[0].toString() + "')").html() != null
            && $(this).find("td:eq(1):contains('" + filterArray[1].toString() + "')").html() != null
            && $(this).find("td:eq(2):contains('" + filterArray[2].toString() + "')").html() != null)
        {
            $(this).show();
        }
    });  
});

Any ideas why this worked? I tried specifying the column number the other way and couldn't get it to work.