deferRender with Select & Scroller

Diego123a73

Description of problem: I have a table with a lot of data (can contain over 100k rows stored locally), which must contain all the data in one page.
For that reason, I added the extension Scroller, which helped with the performance a lot, but still wasn't enough for it to feel fluid, and adding the deferRender option as an addition to Scroller has solved all my problems... But it has created another problem.
Users will try to select (using the Select extension) thousands of cells at a time (clicking a cell, scrolling down a lot, and pressing shift+click to select all those cells), and visually it'll seem that everything worked correctly, but when the program tries to retrieve the selected cells (with table.cells( { selected: true } ).data();) to try to do something with them, a lot of the cells which should be selected but were never loaded by the user aren't included on the list, which ultimately makes the result unreliable.

What could be a workaround for this? For example is there some way to temporarily disable deferRender but only while doing certain actions?

allan

I don't think there is a workaround for this I'm sorry to say. The problem is that Select is used the nodes to select rows with a shift click (a range). I'll need to change how it works a bit in order to solve this.

Allan

Diego123a73

I guess for now I'll have to leave deferRender disabled and hope there's a solution some day

Thank you Allan for such a quick response!

allan

I'll have a look for the upcoming release - it would be nice to get this in and fixed.

Allan

allan

I've just been looking at the code, and I was surprised that it wasn't working, so I've created a test case, and it does actually appear to be working for me. With the current releases: https://live.datatables.net/nafidaba/1/edit .

To test, click a row in the table as it is loaded, then use the scrollbar to zip down the table. Shift click to select another row - there will be a large gap in the middle where rows weren't drawn, so they don't have any nodes displayed, but the rows will still be selected. Depending on how many rows you select, it might take a few seconds for the selection process to complete.

Then to check that it works as expected on the console for that iframe run:

$('#example').DataTable().rows().nodes().count()
$('#example').DataTable().rows({selected:true}).count()

For the selection and draws I've just done I get:

234
46087

So 234 tr nodes drawn (at the start of the table and where I dropped the scroll), but 46k rows selected. Rows in the gap were selected and if I jump back up with the scroll bar I can see the rows are selected as they get rendered.

Once thing I notice is that you are using:

table.cells( { selected: true } ).data();

Cell selection is different from row selection. Just because a row is selected, its cells are not. I'm not sure if you are selecting rows or cells in the UI? The two are orthogonal.

Can you give me a link to a page showing the issue so I can look into it? The example I have above appears to be working as expected.

Allan

Diego123a73

Hey allan, apparently I overlooked it and I was using

table.cells( '.selected' ) 

to get the cells instead of

table.cells( { selected: true } )

So the program was trying to read the selected cells from the HTML instead of the Select API, which is what clashed with the deferRender.
Now that I switched it everything seems to be working as expected!
Sorry for the troubles and thanks for looking into it

allan

Ah! That would do it. Thanks for letting me know

Allan