Question

我有一个包含很多字段的数据库。我希望用户能够在多个字段上进行过滤。我正在寻找一个Javascript实现（没有jQuery），也可能是一个jQuery实现。我想要的是当你只在html，php，js中使用过滤器到表头并使用mySQL作为数据库时，excel提供的函数。

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

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

选项值= \“”。$ row [$ filterby]。“\”＆gt;“....
用户选择一个项目，“onChange”调用JS函数来构建搜索字符串：
？
水果=苹果＆安培;颜色=绿色

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

该代码适用于一个字段，但如果我想要过滤多个字段，则新页面没有我刚刚传入的内存。

我的问题是双重的：

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

编辑：

我认为为了清晰起见我会添加视觉效果。

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

filter.php水果=苹果＆安培;颜色=绿色

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

EDIT2：

使用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();         
    }
}

过滤大表（HTML JS PHP MYSQL）

2 个答案: