Javascript 动态筛选html表数据

我有一个html表，其中的数据来自mysql数据库

我希望使用应用的不同过滤器动态过滤表数据。我还可以选择应用后要删除的过滤器。对不起，解释得不好。我可以举例说明

我有以下网上购物网站

左侧有许多过滤器，如手机品牌、价格范围、操作系统类型等

当我选择手机品牌的时候，比如说摩托罗拉，价格范围在10000卢比到18000卢比之间。我们激活了两个过滤器，并显示“在中显示13个结果”（请查看所附图片以供参考） 现在，我们可以通过按过滤器旁边的关闭按钮删除现有过滤器，或者在现有过滤数据上添加更多过滤器

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

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

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

---

提前感谢您。

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

• 您可以使用ajax请求来过滤您想要的内容（既然您已经输入了，我建议您查看文档）
  这是一种简单的方法。但这并不是很有效，因为每次用户选择一个选项时，您都必须执行对服务器的请求（如果您有大量数据，则可能会很长）

• 当到达这个页面时，您还可以首先获取所有数据（使用纯PHP比

  ajax

  更容易），并将所有这些存储在一个数据库中
  我知道它可能很慢。但它将仅在页面加载时进行。并非像

  ajax

  方式那样在每次请求时都如此
  然后在

  选项单击事件中，可以根据创建的对象和选择的选项，使用新数据刷新当前显示的表。例如：
  
  // 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.
  
  

---

编辑： 这完全取决于您希望在项目中做什么：

• 如果您只是想在一个个人项目上培训自己，或者如果您是为一家小公司（数据库中的行数不超过几千，用户数不超过几千），那么您宁愿使用纯PHP方式
• 如果您计划成为本年度最成功的企业家，并希望您的项目在全球范围内被数十万用户使用，那么您最好使用

  ajax

  方式

---

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

请向我解释，如果数据库中有20k+或30k+记录，并且所有这些记录都是在页面加载时一起请求的，同时大量用户一起加载站点，会发生什么。说到angular，angular还要求服务器的api提供数据。@Arshing你最好有一个好的服务器！除此之外，这完全取决于OP想要做的项目。如果它的目的是销售产品，你将永远不会有超过几千。在这种情况下，将它们全部取出来会更有效。最好为服务器的巨大负载做好准备，比如说几千个产品，然后用户请求（页面负载）从1k增加到10k，同样，这会导致服务器崩溃或变慢。@sravankumar根据您的问题进行了编辑。我想根据您所说的，您最好使用

ajax

方式，但这完全取决于您有多少用户（一次将有多少请求）/@tektiv：谢谢您的解释