Filtering a table with javascript

Question

I have an sql query that I'm echoing out as a table using php.

 $query="SELECT Name,
           Location,
           ID,
           Price

         From ProdTable
         where ID>=2300;"

$results = mysql_query($query);

while ($row = mysql_fetch_array($results)) {
    echo '<tr>';

    foreach($row as $field) {
        echo '<td>' . htmlspecialchars($field) . '</td>';
    }

    echo '</tr>';
}

What I want to do now is be able to filter the table using check boxes (showing all locations on default and then allowing the user to filter them as he/she pleases), like so:

<input type="checkbox" name="location" value="newyork">New York
<input type="checkbox" name="location" value="chicago">Chicago
<input type="checkbox" name="location" value="orlando">Orlando
<input type="checkbox" name="location" value="losangeles">Los Angeles

But I want to do this through javascript so it's more dynamic and the user wouldn't need to press submit in order for the filtering to take place. I know there are already javascript toolkits out there for filtering, but I wanted to write a few javascript functions myself.

Any guidance is greatly appreciated.

"... but I wanted to write a few javascript functions myself.". So what are you waiting for? You haven't written anything! — Ram
– Ram, Commented Oct 17, 2014 at 4:42

Mohamad Shiralizadeh · Accepted Answer · 2014-10-17 05:34:29Z

2

You can use phpGrid or jqGrid for ajax grid. it's easy to use.

answered Oct 17, 2014 at 5:34

Mohamad Shiralizadeh

8,8348 gold badges65 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amitesh · Accepted Answer · 2014-10-17 06:48:39Z

0

You can adopt below basic approach
Match the checkboxes value with user entered value and set its (or parent tr) display none/table-row using javascript accordingly.

answered Oct 17, 2014 at 6:48

Amitesh

1,5171 gold badge12 silver badges20 bronze badges

Comments

weeklyTea · Accepted Answer · 2014-10-17 08:46:10Z

0

if you want to write function by yourself, here is an example of function using jQuery that could help:

$('#val1').change(function(){
    if (this.checked){
        $('table tr').each(function(){
            var td = $(this).find('td')
            if(td.html() == 'value1')
                td.show();
        })
    }else{
        $('table tr').each(function(){
            var td = $(this).find('td')
            if(td.html() == 'value1')
                td.hide();
        })
    }
})

Note: It is far from good way, just sample which must show how can it be solved.

answered Oct 17, 2014 at 8:46

weeklyTea

3452 silver badges11 bronze badges

Collectives™ on Stack Overflow

Filtering a table with javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related