Filter table with multiple filters

Question

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. For these circumstances, without using data type can I manage individual column search?

The procedure will be: If I select = operator and type column any input value and then after a search, the input value will get like one or more row that matches the similar value. In the same way, if I select < operator and this column any input value the less than input value will get if I select > operator and this column any input value the greater than input value will get if I select <= operator and this column any input value the less than or equal input value will get if I select >= operator and this column input value the greater than or equal input value will get.

How to solve this problem?

  const $available_qty = $("#available_quantity");
  const $regular_price = $("#regular_price");
  const $base_price = $("#base_price");
  const $avl_table = $available_qty.closest("table");
  const $rp_table = $regular_price.closest("table");
  const $bp_table = $base_price.closest("table");
  const $aggregate_value = $("#aggregate_condition");

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


  $('button.avl').click(function(){
  const ag = $aggregate_value.val();
  const av = $available_qty.val().trim();  
  const $rowsQty = $avl_table.find("[data-qty]")
  $rowsQty.removeClass("u-none");
  if (av === "") return;
  $rowsQty.filter((i, el) => !aggrFn[ag](el.dataset.qty, +av)).addClass("u-none");
  })


  $('button.rp').click(function(){
      const ag = $aggregate_value.val();
      const rp = $regular_price.val().trim();
      const $rowsQty = $rp_table.find("[data-qty]")
      $rowsQty.removeClass("u-none");
      if (rp === "") return;
      $rowsQty.filter((i, el) => !aggrFn[ag](el.dataset.rp, +rp)).addClass("u-none");
  })


  $('button.bp').click(function(){
      const ag = $aggregate_value.val();
      const bp = $base_price.val().trim();
      const $rowsQty = $bp_table.find("[data-qty]")
      $rowsQty.removeClass("u-none");
      if (bp === "") return;
      $rowsQty.filter((i, el) => !aggrFn[ag](el.dataset.bp, +bp)).addClass("u-none");
  })

  table {
        width: 100%;
        border-collapse: collapse;
    }
    table thead th {
        padding: 15px;
    }
    table tbody tr td{
        padding: 10px;
        text-align: center;
    }
    .text-center{
        text-align: center;
    }
    .header-name{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .u-none{
        display:none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<table>
    <thead>
        <th class="text-center">
            Available Quantity
            <div class="header-name">
                <div>
                    <select id="aggregate_condition">
                        <option value="=">=</option>
                        <option value="<">&lt;</option>
                        <option value=">">&gt;</option>
                        <option value="<=">≤</option>
                        <option value=">=">≥</option>
                      </select>
                </div>
                <div>
                    <input type="text" id="available_quantity">
                </div>
                <div>
                    <button class="avl" type="submit">Apply</button>
                </div>
            </div>
        </th>
        <th class="text-center">
            Regular Price
            <div class="header-name">
                <div>
                    <select id="aggregate_condition">
                        <option value="=">=</option>
                        <option value="<">&lt;</option>
                        <option value=">">&gt;</option>
                        <option value="<=">≤</option>
                        <option value=">=">≥</option>
                      </select>
                </div>
                <div>
                    <input type="text" id="regular_price">
                </div>
                <div>
                    <button class="rp" type="submit">Apply</button>
                </div>
            </div>
        </th>
        <th class="text-center">
            Base Price
            <div class="header-name">
                <div>
                    <select id="aggregate_condition">
                        <option value="=">=</option>
                        <option value="<">&lt;</option>
                        <option value=">">&gt;</option>
                        <option value="<=">≤</option>
                        <option value=">=">≥</option>
                      </select>
                </div>
                <div>
                    <input type="text" id="base_price">
                </div>
                <div>
                    <button class="bp" type="submit">Apply</button>
                </div>
            </div>
        </th>
    </thead>
    <tbody>
        <tr data-qty="4">
            <td>4</td>
            <td>10</td>
            <td>12</td>
        </tr>
        <tr data-qty="9">
            <td>9</td>
             <td>12</td>
             <td>11</td>
        </tr>
        <tr data-qty="1">
            <td>1</td>
            <td>14</td>
            <td>12</td>
        </tr>
        <tr data-qty="0">
            <td>0</td>
            <td>8</td>
            <td>10</td>
        </tr>
        <tr data-qty="6">
            <td>6</td>
            <td>14</td>
            <td>18</td>
        </tr>
        <tr data-qty="1">
            <td>1</td>
            <td>11</td>
            <td>22</td>
        </tr>
        <tr data-qty="6">
            <td>6</td>
            <td>10</td>
            <td>8</td>
        </tr>
    </tbody>
  </table>

Answer 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,
};

function filterColumns($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;
}

.filter input {
  width: 6em;
}

.u-none {
  display: none;
}

<table>
  <thead>
    <th class="filter">
      Available Quantity
      <div>
        <select>
          <option value="=">=</option>
          <option value="<">&lt;</option>
          <option value=">">&gt;</option>
          <option value="<=">≤</option>
          <option value=">=">≥</option>
        </select>
        <input type="number">
      </div>
    </th>
    <th class="filter">
      Regular Price
      <div>
        <select>
          <option value="=">=</option>
          <option value="<">&lt;</option>
          <option value=">">&gt;</option>
          <option value="<=">≤</option>
          <option value=">=">≥</option>
        </select>
        <input type="number">
      </div>
    </th>
    <th class="filter">
      Base Price
      <div>
        <select>
          <option value="=">=</option>
          <option value="<">&lt;</option>
          <option value=">">&gt;</option>
          <option value="<=">≤</option>
          <option value=">=">≥</option>
        </select>
        <input type="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>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>