How to populate nodes(of a specific template) based on JSON data on different pages, and still Filter

Question

So, I am working on a project where from a JSON response i have to create a list. Each item in the list has a common template. Only the data part that is different is populated using JSON response.

About the JSON, it is an ajax request response, in which as parameter I am passing start:0 and rows:9999, so to get all data.

The whole point of briefing above thing is, when i go with above approach, dynamically creating list based on JSON response creates thousands of nodes, which effects the initial page load time. In general, it takes around 10 secs to populate around 6k nodes.

Only solution which seems doable to me is to break the result into pieces and show a max of say, 10 results in one page. It boils down to use pagination and thus on every page request, do ajax with request to next 10 values and simultaneously populate.

But the problem lies in filtering the data when the list is not full(start:0, rows:20), as we used to have earlier with all nodes/data(start:0, rows:9999). This will effect the filtered results. Filter is done by hiding the node which doesn't satisfy the filter criteria. So if all the nodes are not in the list, filter will not show the same result as earlier.

I am confused about the way to proceed and still achieve filter. How can on a single ajax request, list is populated on different pages, but only one of them is shown at a time. Any suggestions are appreciated.

Answer 1

如果要以树的形式显示数据，则可以使用基于jQuery的jstree框架。