具有多个过滤器的过滤器表

Question

其实，我正在尝试创建一个特定的每列搜索。在这里，我可以使用数据类型管理第一列搜索，但使用此数据类型我无法处理其他列搜索。对于这些情况，不使用数据类型是否可以管理单个列搜索？

过程将是：如果我选择 = 运算符并在列中键入任何输入值，然后在搜索后，输入值将得到与相似值匹配的一行或多行。同样，如果我选择 运算符和此列，则将获得小于输入值的任何输入值，如果我选择 = 运算符，将获得小于或等于输入值的任何输入值，并且将获得大于或等于输入值的该列输入值。

如何解决这个问题？

  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

过滤表行 - 多个过滤器

切换类 "u-none"（隐藏一行）的布尔逻辑与this already provided answer 非常相似，但您需要将代码修改为：

• 创建一个函数filterColumns( $someTableTarget )，它接受jQuery 包装的HTMLTableElement 作为目标。
• 创建对象colFilters（用于过滤列），
  其中对象键是列索引
  value 是一个对象{agg:<select value>, val:<input value>}
• 循环每个匹配列索引的"tbody tr" 及其td 元素（colFilters 的键） 切换 "u-none" 类取决于 shouldHide 布尔值，由推导出 在colFilters 的Object.entries() 上使用Array.prototype.some()

以下示例适用于页面上任意数量的 <table> 元素 - 并且如果某些 TH 没有过滤器输入：

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>