Implement content filtering using jquery ajax and php

Question

I implemented multiple flag filtering for the job portal using jQuery, where I called the function every time the flag was set, and this function contained an ajax call that would send a request with verified values, and I would make a database query and return the result.

But one of the developers I met told me that you should not constantly hit the database for filtering, this should be done on the client side.
He also suggested using AngularJS or Knockout (js) for this purpose, since they work on content, while jQuery works on DOM elements.

But if you need to do this on the client side, all the data should be downloaded immediately during the first visit to the page, which, in turn, will slow down the page.
And I cannot use a class for each element and show / hide them based on the identifier of the flag or mean something like this, because there are many flags that I think will be hectic.

How to achieve the desired result with good performance?
I'm new to jQuery, so if I didn’t do what I always did, carry me.

Below is an example that I really did:

---

HTML:

<input type="checkbox" name="location[]" value="Bangalore" onclick="loadresult()">Bangalore 

JS:

 function loadresult() { location array value accessed and passed to ajaxcall //ajax call to processresult.php Displaying the DB returned Data } 

PHP (processresult.php) :

 <?php //dbconnection + querying db and returning result ?> 

Answer 1

There is a significant difference. Angular is a structure, and jQuery is a library. With jQuery, it’s much easier to modify event-related DOM elements and do some more interesting things. But you decide how you deal with the data yourself. You can easily move your data to an object or an array of Js objects and pass that data to the DOM tree.
For instance:

 //let presume that you are searching something var someUsers = [{id: 1,name:'User 1'},{id: 2,name:'User 2'},{id: 1,name:'User 3'}]; var usersTemplate = _.template("<h1>User name: <%= user.name %></h1>"); var $container = $('#someRenderContainer'); someInputFeild.on('keypress', function(){ var searchText = someInputFeild.text(); var foundUsers = someUsers.filter(function(item, index){ item.name.indexOf(searchText) !== -1 }); render($container,foundUsers); }) function render($container,users){ users.forEach(function(item){ $container.append(usersTemplate(item)); }) } 

Here is a simple example where you can see that you are manipulating data in memory, but not in the DOM. You can do similar things with your flags.

Answer 2

I would just make one ajax request at the beginning, fill the page with data, marking each line with the class name

 jQuery.each(d, function(i,data) { $("table.content").append("<tr class=\""+data.city+"\"><td>" + data.tag + "</td><td>" + data.city + "</td><td>" + data.num + "</td><td>" + data.state + "</td></tr>"); }); 

and use the checkboxes to hide and show selected lines using jQuery hide (), show () methods. Rows can have multiple classes that are filtered by multiple columns, but the logic will get complicated. see example http://jsfiddle.net/elshnkhll/czdongkp/

Answer 3

I would use cache technology to improve my performance.
We cannot load the full record on one page. This will slow down the loading of the main page.
But we can save the loaded data in a variable with some key combination for different filters, but the page does not.
eg. if we load the fir data index page without a filter, my key will be an index, and my variable will be like var cachevar = {"index":{1:"<my response>"}} , here "1" is the page number

And if the data uses a filter, then my variable index key will be a combination of filter identifiers smoothed by '-'. for example var cachevar = {"index":{1:"<my response>"}, "index-2-5-3":{1:"my response"}}

If the user requests a page, I just need to check if this page is available in the cache or not, if it is available in the cache variable, and then show it, otherwise request it from the server.