CODEWITHSUNDEEP
javascriptjqueryfiltering
user1601973
user1601973

Reputation: 572

Applying multiple select filters on a table in jQuery

I have three select boxes which filter the table on with different criteria. For example, if a user wants to see records with Medium priorities, a Yes On Air Critical & Closed Status. Closed is a data-attribute for every row.

I can do that but my issue is if user wants to select a single filter again, it just shows blank result. Here's the javascript:

$("#input_filter_priority").change(function() {
        var data = this.value.split(" ");

        var $tr_row = $('#project_table').find("tr:not(.hidden)");
        var priority_column = $('#project_table').find("tr :not(.hidden) td:nth-child(5)");
        if (this.value == "") {
            $tr_row.show();
            return;
        }
        $tr_row.hide();

        if (filtered_row !== null) {
            filtered_row = filtered_row.filter(function() {
                $r = $(this);
                if ($r.is(":contains('" + data + "')")) {
                    return true;
                }
                return false;
            })
                .show();
        } else {
            filtered_row = $tr_row.filter(function() {
                $tr_text = $(this).val();
                $r = $(this);
                if ($r.is(":contains('" + data + "')")) {

                    return true;

                }
                return false;
            })
                .show();
        }


    });



    $("#input_closed_filter").change(function() {
        var data = this.value.split(" ");
        var $tr_row = $('#project_table').find("tr:not(.hidden)");

        if (this.value == "") {
            $tr_row.show();
            return;
        }
        $tr_row.hide();


        if (filtered_row !== null) {
            filtered_row = filtered_row.filter(function() {
                $r = $(this);
                if ($(this).attr('data-closed').match(data)) {
                    return true;
                }
                return false;
            })
                .show();

        } else {
            filtered_row = $tr_row.filter(function() {
                $tr_text = $(this).val();
                if ($(this).attr('data-closed').match(data)) {
                    return true;
                }
                return false;
            })
                .show();
        }


    });


    $("#input_on_air_filter").change(function() {
        var data = this.value.split(" ");

        var $tr_row = $('#project_table').find("tr ");
        var on_air_column = $('#project_table').find("tr td:nth-child(6)");
        if (this.value == "") {
            $tr_row.show();
            return;
        }
        $tr_row.hide();



        if (filtered_row !== null) {

            filtered_row = filtered_row.filter(function() {
                $r = $(this);
                if ($(this).attr('data-critical').match(data)) {
                    return true;
                }
                return false;
            })
                .show();
        } else {
            filtered_row = $tr_row.filter(function() {
                $tr_text = $(this).val();
                $r = $(this);
                if ($(this).attr('data-critical').match(data)) {
                    return true;
                }
                return false;
            })
                .show();
        }
    });

What should I do here in case user selects same filter twice or any number of times (Suppose if he changes his mind).

Here's the related JSBin.

Upvotes: 1

Views: 194

Answers (1)

ksun
ksun

Reputation: 1427

Here is a simplified/working version:

var priorityFilterData=null;
var onAirCriticalFilterData=null;
var closedFilterData=null;


  function applyFilters(){
    var $tr_row = $('#project_table').find("tr");
    $tr_row.hide();//hide all rows by default

    //Show only the rows that meet each filter condition
    $tr_row.filter(function(){    
      var closedFilterCondition = (closedFilterData === null || $(this).attr('data-closed').match(closedFilterData));         
      var onAirFilterCondition = (onAirCriticalFilterData === null || $(this).attr('data-critical').match(onAirCriticalFilterData));            
      var priorityFilterCondition = (priorityFilterData === null || $(this).is(":contains('" + priorityFilterData + "')"));                 
      return closedFilterCondition && onAirFilterCondition && priorityFilterCondition;
    }).show();
  }


  $("#input_closed_filter").change(function() {
    closedFilterData = this.value.split(" ");
    applyFilters();
  });

  $("#input_on_air_filter").change(function() {    
    onAirCriticalFilterData = this.value.split(" ");
    applyFilters();
  });

 $("#input_filter_priority").change(function() {
    priorityFilterData = this.value.split(" ");
    applyFilters();
  });

Upvotes: 1

Related Questions