Question: Can I create a table that fetches data uxing XHR?

[Darker]

I need to create a table that will fetch the data using XHR, however I don't want to fetch all data at once.

Is it possible to have Clusterize request data from asynchronous routine?

[NeXTs]

Hello

Clusterize doesn't provide data fetching, you should handle XHR request by yourself and provide data to Clusterize.

[Darker]

Thanks for reply.

I understand that the Clusterize won't fetch the data - that's a good thing.

What I'm asking is, if I can provide the data asynchronously - eg. tell the table there will be 10k rows, then have the table ask for rows that the user is trying to view - instead of fetching everything before rendering the table.

[nevf]

+1 I have the same question.

Let's say I have 500 items and I want to scroll to item 225 how would I do that?

Also is it possible to lazyload items? For example data that comes from a server. And relating this to my first question I'd only want retrieve to 30 or so items around item 225, not all items up unto item 225.

[Darker]

Exactly what I had in mind - lazy loading items. If user scrolls to row X and the items are not loaded, some async callback would provide them.

[Thrilleratplay]

@Darker and @nevf I think what you are looking for is the scrollingProgress callback and .append() method mentioned on clusterize.js.org.

The function is called when the user scrolls and with, if I remember correctly, the percentage of table they have scrolled. Check if they at or are near the end then call the next page and use append to concatenate it to the existing Clusterize instance. Everything else would depend on implementation.

[Darker]

@Thrilleratplay No what I meant was that I would know there's eg. 2000 lines, but only load them when user tries to view them.

[nevf]

@Thrilleratplay Thx, but in my use case I want to programmatically scroll to item 225 and lazy load items around that. ie. The user isn't performing the scroll.

[Thrilleratplay]

Hmmm.....

Maybe initializing rows with an array of empty indices like Array(225).concat(yourTableRows). It may need to be initialized with stub rows<tr><td>&nbsp;</td></tr>, then set scroll-top (explained in #55) to scroll down to that specific row. You could continue to load data and update the data using update(). This assumes the rows are all the same height and there should also be a check using the clusterWillChange callback to prevent the user from scrolling to data that has not been loaded yet. It sounds messy but doable.