过滤大表（HTML JS PHP MYSQL）

Question

I have a database with a lot of fields. I want the user to be able to filter on multiple fields. I am looking for a Javascript implementation (without jQuery) and possibly a jQuery one as well. What I am going for is the function that excel provides when you apply filters to table headers only in html, php, js, and using mySQL as the database.

This is my flow so far:

1. PHP builds the dropdowns for the seperate fields, example:

   option value=\\"".$row[$filterby]."\\">" ....

2. User selects an item and "onChange" calls a JS function to build the search string:

   ?fruit=apple&color=green

The issue I am having is in order to update my table, I have to call a seperate PHP page in my JS (using window.location = "filtered.php" + searchString;)

The code works for one field, but if I want multiple fields to be filtered, the new page has no memory of what I just passed in.

My question is two-fold:

1. Am I going about this completely wrong? What is the best way to produce what I am going for?
2. Is this possible without JQuery or AJAX?

EDIT:

Thought I'd add a visual for clarity.

+----+--------+----------+
| 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    | 
+----+--------+----------+

EDIT2:

Would it be better to get all data with php and have the filters just update the html data? Or should I try to have the JS query the DB everytime a dropdown is changed?

Answer 1

I found what I was looking for at:

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

It has a lot of good examples of pure JS filtering methods, and I'll try to use these for my solution (unless someone has a better one).

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