DEV Community

Shubham Raturi
Shubham Raturi

Posted on

Add Multiple Filter using one function in jQuery, Ajax

Most beginners when they need a filter in a website create multiple functions for each filter, for example, price filter, date-range filter, tag filter, and category filter.
We can create a multiple filters using a single function
below we have a code example.

Creating a predefined variable for all filters

function filter(price,page=1, perPage=2,){
let data = {price,page,perPage}; // set your JSON stringify data to be post.
   $.ajax({
  url: "ajax_url", // your ajax URL
  cache: false, 
  data: data, // Your post data
  method: post // Method
  success: function(data){
   // do filter with response to html or variable.
  }
});
}
Enter fullscreen mode Exit fullscreen mode

In this senerio i have setup a default values and i can run this function in which button i want to call. EX:

$("#price_filter").click(function(){
let price = $("#price").val();
filter(price);
})
Enter fullscreen mode Exit fullscreen mode

This is just an example of an Argument: An argument is just like a variable. Arguments are specified after the function name, inside the parentheses. You can add as many arguments as you want, just separate them with a comma. The above example has a function with three argument,price, page and perPage

Top comments (0)