Dynamic data filter with jquery

There are number of times when we need to filter the data according to category or other specific object. I was working on some project and I have used “mixitup” jquery library for filter the data but it did not full-fill my requirements so that I have created my own script in jquery to filter the data. Today I am going to share with you the code that I have created recently. I have used the following techniques for creating this script:

  • Jquery
  • Php
  • Javascript

Suppose we have category page and number of category exists on this page and every category have number of products. When we click on the category then we will redirect on product page where we can see the products of clicked category. Assume that following is your category page screen.

This is just example screen, so you can design your category as you want; I have created this just for easiness.

category-page-index

 

Following is the example code of above screen.

In this example code, I have attached main jquery and custom script. In custom script I have place all the necessary code that need to change the tab content when click on tab.

 

When  you click on the tab following screen will appear. Now it is very important to note that when you click on the category then it will redirect on “category.php” page with category name variable (If you can use this variable as you required). When category page will open then you see that current category tab is active and product in that category will appear with animation. When you change the tab or category product will filter according to category tab. Following screen will appear when you click on the category link:

 

category-page

 

Following code is help to create the above page:

 

I assumed that you have enough understand the script with this example. If you have any query regarding to this article then you can send message any time.

Now it’s time to show you the very important script which make this script working. Following is the jquery code that helped us.

 

In this script, I have used “animate.css”, a third party script. This is very beautiful and useful script to give different effects on your element. You can download this script from this link.

CSS Animation