sravan kumar sravan kumar - 1 year ago 138
jQuery Question

Dynamically filter html table data

I have a html table with data coming from mysql database.

I would like to filter the table data dynamically with different filters applied. Also I can choose which filters to be removed once it is applied. Sorry for bad explanation. I can explain with an example.

I have the following online shopping website

On the left have many filters like brand of mobile, price range, OS type and so on.

When I select brand of mobile say Motorola and price range of Rs10,000 - Rs 18,000. We get two filters activated and shows "Shows 13 results in" ( please check the picture attached for reference )
dynamic filtering example
now we can remove the filters existing by pressing close button beside the filter or add more filters on the existing filtered data.

I would like to implement something like this in my html table. However I do not know how is this named ( hence named it dynamic filtering ) or how to implement it.

Please guide me how its implemented. Is it done using javascript or php or something else. Also what this technique is called.

I am a newbie to front end development and I work alone hence I dont know how to search for it. Please suggest me some tutorials on how to implement it.

Thank you in advance.

Answer Source

There are actually several ways to perform what you want to do :

  • You could use ajax requests to filter what you want (since you put , I suggest you to look at the .ajax() documentation).

    It is an easy way to do this. But it won't be very efficient since you'll have to perform a request to the server each time the user choose an option (which can be long if you have a lot of data).

  • You could also fetch all the data first, when arriving to this page (using pure PHP would be even easier than ajax), and store all of this in an JS object.

    I get it might be slow. But it will only be at the page loading. Not at every request as the ajax way does.

    Then in your option click event, you can refresh your current displayed table with new data according to both the object you created and the option you selected. E.g :

    // This var is created using PHP for example
    var phones = [
        {"name" : "Moto X Play (16GB)", "brand" : "Motorola", "price" : 15499}, 
        {"name" : "Moto X Play (32GB)", "brand" : "Motorola", "price" : 17499},
        /* And a lot of other phones of course */
    // Then, if you chose a specific brand, you can display only phones with this brand by using phones["brand"] values.

Edit :

It all depends what you want to do in your project :

  • If you just want to train yourself on a personal project, or if you are doing this for a small company (no more than a few thousands rows in database, and a few thousands users), you'd rather using the pure PHP way.
  • If you plan to be the most successful entrepreneur of the year and expect your project to be used worldwide by hundreds of thousands of users, you'd better use the ajax way.

In both case, you should use AngularJS, which is a really good JS framework to perform on huge amount of data.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download