具有多个过滤器的过滤表 [英] Filter table with multiple filters

问题描述

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

过程将是:如果我选择 = 运算符并输入列任何输入值，然后在搜索之后，输入值将得到与相似值匹配的一行或多行.同样，如果我选择 <运算符和此列的任何输入值小于输入值将获得如果我选择 >运算符和此列任何输入值大于输入值将获得如果我选择 <= 运算符和此列任何输入值小于或等于输入值将获得如果我选择 >= 运算符和此列输入值更大将得到大于或等于输入值.

如何解决这个问题?

 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,};$('button.avl').click(function(){const ag = $aggregate_value.val();const av = $available_qty.val().trim();const $rowsQty = $avl_table.find("[数据数量]")$rowsQty.removeClass("u-none");if (av === "") 返回；$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("[数据数量]")$rowsQty.removeClass("u-none");if (rp === "") 返回；$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("[数据数量]")$rowsQty.removeClass("u-none");if (bp === "") 返回；$rowsQty.filter((i, el) => !aggrFn[ag](el.dataset.bp, +bp)).addClass("u-none");})

 table {宽度:100%；边框折叠:折叠；}表头 th {填充:15px；}表 tbody tr td{填充:10px；文本对齐:居中；}.文本中心{文本对齐:居中；}.header-name{显示:弹性；对齐内容:居中；对齐项目:居中；}.u-无{显示:无；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><表格><头><th class="text-center">可用数量<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></选择>

<div><input type="text" id="available_quantity">

<div><button class="avl" type="submit">应用</button>

</th><th class="text-center">正常价格<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></选择>

<div><input type="text" id="regular_price">

<div><button class="rp" type="submit">应用</button>