设置带有过滤器和排序的 HTML 表格

Posted 2023-03-05

【中文标题】设置带有过滤器和排序的 HTML 表格

【英文标题】：Set an HTML table with filters and sorting

【发布时间】：2021-12-22 23:02:34

【问题描述】：

我正在寻找一个脚本，它允许我在 html 表中插入过滤数据的可能性，例如 Excel 提供的具有相同（或几乎）弹性的数据，即即使在多个字段上也可以过滤某些元素，可以按升序和降序排序，也可以过滤所有元素，例如大于或小于某个数字。

有类似的东西吗？

非常感谢您的支持！

【问题讨论】：

你能试试这个包吗react-data-table-component

React 没有在这个问题中被标记，所以推荐一个 React 包可能是矫枉过正

【参考方案1】：

数据表是解决方案：

网址：https://datatables.net/

为此您有多个插件/扩展...您可以做任何您想象的事情...

按列值选择：

https://datatables.net/examples/api/multi_filter_select.html

在每一列中搜索：

https://datatables.net/examples/api/multi_filter.html

【讨论】：

感谢您的建议。那么是否可以制作一个 HTML 表格，其中每个字段都有这样的菜单？ dropbox.com/s/bs4ub0olhrxt8iu/IMG_4298.jpg?dl=0

非常感谢丹尼先生。我看到了您的建议“按值选择列”，并且几乎接近我的需要。不幸的是，我不明白如何为每列选择超过 1 个值，因为在该示例中，我只能为每列选择 1 个值，而我需要控制框来选择要为每列过滤的所有值。最后，过滤更大值、次要值或其他值的可能性。不过，感谢您的这些建议！

【参考方案2】：

根据您的问题描述，我建议您查看Datatables website 或Tabulator website。两者都工作得很好，并且很容易启动和运行。