Where is the best side to filter the data of a AJAX query?

I am programming an web app similar to the hotels or flying finder.

I have see for example http://www.momondo.com/ .

This website show you 1700 hotels and you can filter.开发者_运维百科 You can choose 3 starts, rechoose 3 starts, delete 2 starts, Internet at the room, price range, ... But the filter seem that dont use the network to make another query to the Database.

It filter the result in the browser of the client?

What do you think? A browser support the info of 1700 hotels load in memory?

Modern web browsers support what's either known as 'localstorage' or 'Web Storage'.

This basically allows you to load a bunch of data into the client machine, and use database operations locally. If your dataset size is reasonable (under a few MB), this can be efficient, as you don't have the scaling issues of trying to do everything on the server.

If you're dealing with huge datasets, you'll push up against browser limits and have to get people to reconfigure their browser, but you're likely not going to be having them display 500MB of data at once, so it might be more efficient from a network standpoint to partition the data into smaller chunks anyway.

As for the 'best' solution ... it likely depends on how much data they're going to need relative to the entire dataset. I'm dealing with some databases that are tens of millions of records, so I do the filtering server side, but if they want to do additional filtering after the initial search, it's better for me to do it client side, just to offload the processing and reduce the network traffic.

It filter the result in the browser of the client ?

I don't think so. May be you can call a script with ajax to respond filtered datas to display. I think it's more lighter ^^ for customer's browser.

What do you think ? A browser support the info of 1700 hotels load in memory ?

Yeah it must work with light datas but with long delay for huge datas (big arrays * 1700) You can just send a limited number of hotels with the script called by Ajax who filtered datas to send.

Yes you can avoid using the network all the time if you are sure 1700 or so is your total number of hotels. Definitely the browser can handle that. Just handle the dom offline and you should be fine (more explanation on it below). And of course, as your number of hotels increase, you might consider moving the filtering to the server side.

So the key point is doing the dom changes offline. By that I mean the browser takes some time to repaint the dom - and repainting the dom happens every time you make any dom change. So if you are doing .hide() and .show() from 1700 jquery elements that are part of the dom, that will be the reason for a considerable slowness.

Solution: use jquery .detach() on all hotel elements and then do the hide/show. Differently from .remove() it will keep any events binded to those elements when you add them back to the dom. And by doing the hide/show "offline" (while they are detached from the dom) will make the dom be repainted (the expensive operation) only once when you add them back.