Implementing Filtering content using jquery ajax and php

Question

I had implemented multiple checkbox filtering for a job portal using jQuery where in I was calling a function every time a checkbox is checked and that function contained an ajax call which would send the request with the checked values and I would do the querying of database and return the result.

But one of the developers I meet told me you should not hit the database continuously for filtering, it should be done client-side.
He also suggested to use AngularJS or Knockout(js) for the purpose, as they work on content, whereas jQuery works on DOM elements.

But if it has to be done client-side, all of the data must be loaded at once during the first visit to the page, which in turn would slow down the page.
And I cannot use class on each element and show/hide them based on the checkbox ID or value something like that, because there are a lot of checkboxes, which I think will be hectic to handle.

How to achieve the desirable result with good performance?
I'm a Newbie to jQuery, so if I have gone wrong anywhere bear with me.

Below is the sample way in which I have actually done:

---

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 significant difference. Angular is a framework and jQuery is a library. With jQuery it much simpler to modify DOM elements deal with events and do some more cool stuff. But you define how you deal with data on your own. You can easily move your data to Js object or array of objects and render this data to your DOM tree.
For example:

//let's 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 simple example where you can see that your manipulate with data in the memory but not in DOM. Similar things you can do with your checkboxes.

Answer 2

I would just make one ajax request in the beginning, fill the page with data, marking every row with 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 checkboxes to hide and show marked rows using jQuery hide(), show() methods. Rows can have multiple classes meaning filtered by multiple columns, but logic will get more complicated. see example http://jsfiddle.net/elshnkhll/czdongkp/

Answer 3

I would use cache technique to improve my performance.
We can't load our full record on a single page. It will slow down the main page loading.
But we can save loaded data in a variable with some key combination for different filter and page no..
eg. if we are loading data fir index page with no filter, the my key will be index and my variable will be like var cachevar = {"index":{1:"<my response>"}}, here "1" is page number

And if data is using filter, then my variable index key will be combination of filter ids saperated by '-'. eg var cachevar = {"index":{1:"<my response>"}, "index-2-5-3":{1:"my response"}}

If user request a page, I just have to check if that page is available in cache or no, if it's available in cache variable, then show it, else request it from server.