php - 过滤大表（HTML JS PHP MYSQL）

Question

我有一个包含很多字段的数据库。我希望用户能够过滤多个字段。我正在寻找一个 Javascript 实现（没有 jQuery），也可能是一个 jQuery 实现。我要的是当您仅在 html、php、js 中将过滤器应用于表头并使用 mySQL 作为数据库时，excel 提供的功能。

到目前为止，这是我的流程：

1. PHP 为单独的字段构建下拉列表，例如：

   选项值=\"".$row[$filterby]."\">" ....

2. 用户选择一个项目，“onChange”调用一个 JS 函数来构建搜索字符串：

   ?水果=苹果&颜色=绿色

我遇到的问题是为了更新我的表格，我必须在我的 JS 中调用一个单独的 PHP 页面（使用 window.location = "filtered.php" + searchString;）

该代码适用于一个字段，但如果我想过滤多个字段，新页面将不记得我刚刚传入的内容。

我的问题有两个：

1. 我会完全错了吗？产生我想要的东西的最佳方式是什么？
2. 如果没有 JQuery 或 AJAX，这可能吗？

编辑：

为了清楚起见，我想我会添加一个视觉效果。

+----+--------+----------+
| id | Fruit  | Color    | 
+----+--------+----------+
| 1  | apple  | red      | 
| 2  | mango  | yellow   | 
| 3  | banana | yellow   | 
| 4  | apple  | green    | 
+----+--------+----------+

filter.php?fruit=apple&color=green

+----+--------+----------+
| id | Fruit  | Color    | 
+----+--------+----------+
| 4  | apple  | green    | 
+----+--------+----------+

编辑2：

使用 php 获取所有数据并让过滤器只更新 html 数据会更好吗？还是应该在每次更改下拉列表时让 JS 查询数据库？

Answer 1

我找到了我正在寻找的东西：

http://www.javascripttoolbox.com/lib/table/examples.php

它有很多纯 JS 过滤方法的好例子，我会尝试将这些用于我的解决方案（除非有人有更好的解决方案）。

Answer 2

function price_filter(str)
{       
    var subcategory = new Array();
    $('input[type="radio"]:checked').each(function(){subcategory.push($(this).val());});
    alert (subcategory);
    alert(subcategory.length);
    var price1 = str;
    if(subcategory.length == '0')
    {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {       

            if(xmlhttp.readyState == 4)
            {     
                document.getElementById("pri_fil").innerHTML = xmlhttp.responseText;    
            }
        };

        xmlhttp.open("GET","search.php?price=" + price1,true);
        xmlhttp.send(); 
    }   
    else
    {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if(xmlhttp.readyState == 4)
            {
                document.getElementById("pri_fil").innerHTML = xmlhttp.responseText;    
            }
        };

        xmlhttp.open("GET","search.php?price=" + price1 + "&subcategory=" + subcategory,true);
        xmlhttp.send();         
    }
}