Filter Table With Multiple Filters

Actually, I am trying to create a specific each column search. Here I can manage the first column search with data type but using this data type I can't handle other columns search

Solution 1:

Filter table rows - Multiple filters

The boolean logic to toggle the class"u-none" (to hide a row) is quite similar to this already provided answer, but you need to modify your code to:

• Create a function filterColumns( $someTableTarget ) that accepts as argument the jQuery wrapped HTMLTableElement to target.
• Create an Object colFilters (to filter columns), where the object key is the column index and the value is an object {agg:<select value>, val:<input value>}
• Loop every "tbody tr" and its td elements that match the column index (key of colFilters) toggle the "u-none" class depending on shouldHide boolean which is deduced by using Array.prototype.some() on the Object.entries() of colFilters

The following example works for any number of <table> elements on the page - and also if some THs do not have filter inputs:

const aggrFn = {
  "=": (a, b) => a == b,
  "<": (a, b) => a < b,
  ">": (a, b) => a > b,
  "<=": (a, b) => a <= b,
  ">=": (a, b) => a >= b,
};

functionfilterColumns($table) {
  const colFilters = {};
  $table.find("thead .filter").each(function() {
    colFilters[$(this).index()] = {
      agg: $(this).find("select").val(),
      val: $(this).find("input").val(),
    }
  });
  $table.find("tbody tr").each(function() {
    const $tr = $(this);
    const shouldHide = Object.entries(colFilters).some(([k, v]) => {
      const tdVal = $tr.find(`td:eq(${k})`).text();
      return v.val === "" ? false : !aggrFn[v.agg](parseFloat(tdVal), parseFloat(v.val));
    });
    $tr.toggleClass("u-none", shouldHide);
  });
}

$(".filter").on("input", ":input", function(ev) {
  filterColumns($(this).closest("table"));
});

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  text-align: center;
}

.filter>div {
  display: flex;
  justify-content: center;
}

.filterinput {
  width: 6em;
}

.u-none {
  display: none;
}

<table><thead><thclass="filter">
      Available Quantity
      <div><select><optionvalue="=">=</option><optionvalue="<">&lt;</option><optionvalue=">">&gt;</option><optionvalue="<=">≤</option><optionvalue=">=">≥</option></select><inputtype="number"></div></th><thclass="filter">
      Regular Price
      <div><select><optionvalue="=">=</option><optionvalue="<">&lt;</option><optionvalue=">">&gt;</option><optionvalue="<=">≤</option><optionvalue=">=">≥</option></select><inputtype="number"></div></th><thclass="filter">
      Base Price
      <div><select><optionvalue="=">=</option><optionvalue="<">&lt;</option><optionvalue=">">&gt;</option><optionvalue="<=">≤</option><optionvalue=">=">≥</option></select><inputtype="number"></div></th></thead><tbody><tr><td>4</td><td>10</td><td>12</td></tr><tr><td>9</td><td>12</td><td>11</td></tr><tr><td>1</td><td>14</td><td>12</td></tr><tr><td>0</td><td>8</td><td>10</td></tr><tr><td>6</td><td>14</td><td>18</td></tr><tr><td>1</td><td>11</td><td>22</td></tr><tr><td>6</td><td>10</td><td>8</td></tr></tbody></table><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>