Question

我有一个html表，数据来自mysql数据库。

我想在应用了不同过滤器的情况下动态过滤表格数据。此外，我可以选择应用后要删除的过滤器。对不起，解释不好。我可以用一个例子来解释。

我有以下在线购物网站 flipkart_mobiles

左侧有许多过滤器，如移动品牌，价格范围，操作系统类型等。

当我选择摩托罗拉的移动品牌时，价格范围为10卢比 - 18,000卢比。我们启动了两个过滤器并显示“显示13个结果”（请查看附图以供参考）现在我们可以通过按过滤器旁边的关闭按钮来删除现有的过滤器，或者在现有的过滤数据上添加更多过滤器。

我想在我的html表中实现这样的东西。但是我不知道这是如何命名的（因此命名为动态过滤）或如何实现它。

请指导我如何实施。它是使用javascript或php或其他方式完成的。这也就是所谓的技术。

我是前端开发的新手，我独自工作因此我不知道如何搜索它。请给我一些关于如何实现它的教程。

提前谢谢。

Answer 1

实际上有几种方法可以执行您想要执行的操作：

您可以使用ajax请求来过滤您想要的内容（因为您放置jquery，我建议您查看.ajax()文档）。

这是一种简单的方法。但它不会非常有效，因为每次用户选择一个选项时你都必须向服务器发出请求（如果你有大量数据，这可能会很长）。
您也可以在到达此页面时首先获取所有数据（使用纯PHP比ajax更容易），并将所有这些数据存储在JS object中。< / p>
我觉得它可能很慢。但它只会在页面加载时。不是ajax方式的每个请求。

然后在option click事件中，您可以根据您创建的对象和您选择的选项，使用新数据刷新当前显示的表。例如：
```
// This var is created using PHP for example
var phones = [
    {"name" : "Moto X Play (16GB)", "brand" : "Motorola", "price" : 15499}, 
    {"name" : "Moto X Play (32GB)", "brand" : "Motorola", "price" : 17499},
    /* And a lot of other phones of course */
];

// Then, if you chose a specific brand, you can display only phones with this brand by using phones["brand"] values.
```

编辑：

这完全取决于你想在项目中做什么：

在这两种情况下，您都应该使用AngularJS，这是一个非常好的JS框架，可以执行大量数据。