Scroller pagination issue: offset always 0

tacman1123

Scroller pagination has always bit a bit of a mystery to me. I'd like to be able to configure that page size, it appears to guess the page size based on some hueristic.

Regardless, that's not really my problem. When scrolling through

https://packages.survos.com/

it works fine, you can see in the console that the offset changes.

But when selecting Symfony 7 and marking=valid

https://packages.survos.com/?marking=valid&symfonyVersions=7.0 (alas, due to an unrelated but, query string parameters aren't auto-selecting the facets, so to see the error you have to open the searchPanes and select these 2).

Now scroll through, and and the debug line shows the offset as always 0, so it never gets beyond 135.

I think this use to work, but may not. It seems to work without the facet searches, so maybe I'm encoding something wrong? Or maybe related to the sort?

tacman1123

I made a 45-second video to show the problem: https://www.awesomescreenshot.com/video/26297260?key=16f4eaa82bba8a918a37d2a83cb61fd1

allan

Hi,

Thanks for the link and video.

The number of rows that Scroller selects to get and display is based on scroller.displayBuffer. That is basically the number of rows that fit into the viewport multiplied by that fixed factor.

This is the code that does that.

Regarding the offset, I'll need to come back to that. I'm traveling this week, so it will probably be next week before I get a chance to have proper look at it.

Allan

tacman1123

Thanks -- that explains why when I open the console debugger the number of rows requested changes!

I'm still stuck on the offset, I'd be grateful if you got a chance to look at it. Thanks.

tacman1123

Perhaps there's a version out of sync, I found this when trying to upgrade everything.

[warning] datatables.net-scroller-bs5 requires datatables.net-bs5@1.11 - 2 but version 2.0.3 is installed.
[warning] datatables.net-scroller-bs5 requires datatables.net-bs5@1.11 - 2 but version 2.0.3 is installed.
[warning] datatables.net-scroller requires datatables.net@1.11 - 2 but version 2.0.3 is installed.
[warning] datatables.net-scroller requires datatables.net@1.11 - 2 but version 2.0.3 is installed.

tacman1123

Hi, any suggestions on where I can look to solve this?

allan

datatables.net-scroller requires datatables.net@1.11 - 2 but version 2.0.3 is installed

That doesn't make a particularly huge amount of sense to me. 2.0.3 should be included in that range I thought. I understood it to be 1.11.* through 2.*.

Checking with the npm SemVer Calculator appears to confirm this:

What package manager are you using?

Allan

tacman1123

AssetMapper (from Symfony) which downloads the packages from jsdelivr.

I believe it then scans the downloaded package for dependencies and installs those.

tacman1123

But I'm not sure the problem is the packages, but rather that the callback isn't providing the right offset. Maybe it's a package sync issue, but that might be completely unrelated.

tacman1123

I've added an issue to get rid of the warning in AssetMapper, but I'm almost positive that it's simply a false warning, and not the root of the pagination problem.

https://github.com/symfony/symfony/issues/54610

tacman1123

Are you able to confirm this behavior? I'm stuck on where to even look at this point. I'm wondering if it's something new in version 2, as I think this same code use to work.

allan

Apologies - I was focusing not on the offset issue, but rather the version error. That might well be something in symfony that has different semver handling that node - I'm not sure.

But going back to the offset issue - it looks like you have different row heights in the table, and that isn't valid with Scroller. With Scroller you must have all rows exactly the same height, otherwise it can't perform its virtual scrolling calculations (i.e. it can't say "row x must be exactly at pixel position y, since all rows as height z" and it can't calculate the height of all rows, since 1, it doesn't have all the rows and 2 that would be so slow).

Try adding the nowrap class to your DataTable. That will help in that regard (although you'll have the description column hidden by Responsive I'm afraid).

I'm not certain that will fix it outright, but it might...

Allan

tacman1123

Indeed, that solves the problem, thanks!

Is there a way to simply lock the row height? I can control the image size (though the images are loaded later, obviously, and that's probably contributing to the mis-calculation of the height).

That is, if I have to lock the height of the row, it should be the maximum height of the thumbnail image. Then I'd like description to simply wrap to the available height and show an ellipsis if it doesn't have the space.

allan

I'm not seeing a thumbnail on the page I'm afraid? However, if you have an <img> tag, adding the correct height and width attributes will allow it to render in the space correctly.

One other thing I've realised - the use of the child rows is going to mess up Scroller as well, since that also takes up vertical space in the scrolling container.

You could use a modal? Or if you only have 1000 rows, I wouldn't bother using Scroller. It if was 10k, then sure, it makes more sense (although paging might work for you instead of scrolling?).

Allan