javascript - PHP Mysql query - allow user to filter results

434

I have a webpage setup with php and mysql. I've figured out how to run a query which pulls from mysql and prints the results in a table on the webpage.

Now I want to allow the user to filter the results 1 column at a time. No typing in needed, a pull down menu which shows options from the database would be fine. E.g. in my code below, they can filter either by name, date, or state. Initially the webpage shows all results.

Filtering multiple columns at a time would be nice, but not required. Ideally I envision dropdowns for each column where when the user selects the option, the results update. I would also prefer to not have to create separate webpages, but if I need to that's fine.

My question is: What should I use to accomplish this as simply and as easily as possible? I am hoping there is a development tool which makes this an easy task. Should I just use HTML get/post forms? Or Ajax? Or Javascript? RubyonRails? Or? Any specific advice on what features within these resources I should use would be helpful also, because I am not familiar with Javascript / Ajax / Ruby, but I am open to diving into it if it has some good built in functionality to do this with.

Below is a sample of my code. The query is filtering results because I was testing to make sure I could execute a query with a variable, but initially it should just do a simple select * from table.

    <?php 
    print "Filter Results by Name, Date or State";

    $connection = connectdb("mysql");

    $state = "Kentucky";    

    $querytext = sprintf("SELECT * FROM tablename
        WHERE state = '%s'
        ",
        mysql_real_escape_string($state));

    $queryresult = getqueryresult($querytext,$connection);

    $tableid = "mytablestyle";

    printqueryresult($tableid,$queryresult);

    //close connection
    mysql_close($connection);
    ?>
487

Answer

Solution:

Because you are returning all of the rows and then you want to filter the table you will have to do it with Javascript. However, if you do not know JavaScript and need a quick solution I would recommend you use JQuery and a plugin-in like this: http://www.picnet.com.au/picnet-table-filter.html

If you look at the demo there is a list drop down like the one you described. Good luck!

691

Answer

Solution:

If I understand correctly, you would like that when the value of the dropdown list changes then it would update filtered data according to the selected value? For this you would want to use javascript, onchange event. You can use vanilla javascript, of course, but I (and probably any other developer) prefer jQuery.

I've put up a little example at jsFiddle:

$(function(){
    $("#my-select").change(function(){
        //$("form").submit();
        alert("submitting the form now!");
    });
});

<form>
    <select name="something" id="my-select">
            <option value="one">One</option>
            <option value="two">Two</option>
    </select>
</form>
155

Answer

Solution:

You have numerous options, each with their own advantages and disadvantages.

1 Would be regular html forms with get/post. This would be the simplest to set up if you have no js knowledge, but would require a page refresh each change

2 Would be to use ajax to do the same without page reload. your php would be pretty much identical to solution one.

3 Would be to load all the data (select *) into a js variable on page load, and sort it as needed with js. This would mean you only make one database call, but would be unsuitable if a lot of data is returned

People are also looking for solutions to the problem: php - how to get stock status in opencart product page

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.