Scrolling and info changes when upgrading from 1.10 to 1.12

mustafamond · October 2022

Hello,

I have attempted upgrading from version 1.10 to 1.12 recently and have discovered some behavior changes when it comes to scrolling and the "window" size. The question is, are there specific settings I need to change or add to obtain the previous behavior under 1.10? I have some client side lists, but most have been converted to server side. I am set up for continuous scrolling instead of pagination. I am also using KeyTable to be able to select items in the list (upgraded from 2.5 to 2.7).

In 1.10, the "window" size was 45. It seems that has been reduced to 10 by default in 1.12 - can that be changed back to 45?

In 1.10, the scroll bar would let me scroll anywhere in the list, and that section of the list would then load in the visible part of the screen. in 1.12, the scrollbar only scrolls inside the current "window". For example, say my full list is 1500 items long. In 1.10, I would be able to grab the scrollbar and move it down about halfway to get to approximately item index 750. In 1.12, that scroll bar only scrolls within the current "window" which is 10 items - if I am on item index 1 and pull the scroll bar all the way to the bottom, I only see up to item index 10. The only way to get further down the list is to select the list itself and use the down arrow key to continuously scroll through the list - which is also desired behavior, but I'd also like to be able to use the scrollbar to quickly move further down the list as allowed in 1.10.

Finally, another difference I discovered in the info line ("Showing X to XX of YY entries"). In 1.10, it accurately showed what was in the visible part of the window - so, if my window size (scrollY: "200px",) showed just over 4 lines of data, the info bar would accurately report "Showing 12 - 16 of 1500 entries". When upgrading to 1.12, it always reports the full window size of 10 - or "Showing 11 - 20 of 1500" even though only around 5 of those lines are actually showing in the visible part of the window.

All I did to upgrade was just update the script loads from the CDN to the latest versions which changes the behavior. If I revert back to 1.10, the behavior reverts back to the desired scrolling and accurate info reporting.

Thank you

allan · October 2022

Could you link to a page showing the issue please?

Allan

mustafamond · October 2022

Hello,

I have finally gotten some time to put together a couple of sample pages.

https://test.rhazenette.com/dt_sample
https://test.rhazenette.com/dt_sample_upgrade

The first link uses 1.10 and the second uses 1.12. No other code has been changed.

In 1.10, "fast scrolling" (ie - keep down arrow pressed continually) would lose focus when the user eventually let up on the down arrow key (the blue box disappears and hitting "return" no longer selects the row you were on) - this problem appears to be resolved in 1.12 which is a great improvement - but then we have the other problems detailed in the original post (notice the scrollbar size and handle difference between the two as well as the "window" size of 10 vs 45)

Note: Serverside is turned on - the samples are pulling live data from the database

Thank you for taking a look.

allan · October 2022

On the 1.12 page, Scroller doesn't appear to be getting loaded. You have the comment in the HTML: , but only DataTables and KeyTable are there.

Add in Scroller and initialise it in the DataTables constructor, and it should start working as before again.

Allan

mustafamond · October 2022

Hello - Well, that solved the problem of the different behavior - thank you. Apparently, in the original I was using a combined CDN that included the scroller and did not use the equivalent for the new version.

So, the old behavior that I was hoping was resolved is now back, so I must be doing something else wrong. If you "fast scroll" meaning you put focus on the datatable, then keep the down arrow key pressed through multiple "windows", once you let off the down arrow, the datatable loses the focus completely. In the new version, some sort of focus is still there but in a row outside the visible window, so you can't see the blue box but if you use the up and down arrows it does select a different row (the old version moves the list up and down, but no new row is selected). You can see this in the samples.

The other undesired behavior that appears in version 1.12 (but not in 1.10) has to do with grabbing the scrollbar and pulling it down to move way down the table. Each row focused makes an ajax call to bring back additional details with a delay built in to handle "fast scroll". In version 1.10, this worked ok. The visible window would show records part way down the list, and you could click on one to focus and see the details (not ideal - at some point I will add code that focuses there without having to click, but that's a separate issue) In the new version, it seems to want to focus on many rows along the way causing hundreds of ajax calls and jumping all around the list (example: from row 3 to 1700 back to 3 to 1701). Do I need to use a different event in 1.12, or code around the focusing on many different rows when using the scrollbar?

Here is the code I use to bring up the details when a row is selected:

viewTable
            .on("key-focus", function (e, datatable, cell, originalEvent) {
                var rowData = datatable.row(cell.index().row).data();
                slug = rowData[slug_index];
                if (canRun) {
                    canRun = false;
                    slugLastRun = rowData[slug_index];
                    $.ajax({
                        url: get_detail_url,
                        type: 'POST',
                        headers: {
                            'X-CSRFToken': getCookie('csrftoken')
                        },
                        data: {
                            slug: slug,
                            return: return_form,
                            location: (typeof siteLocation == 'undefined' ? "" : siteLocation),
                            redirect: (typeof redirectTo == 'undefined' ? "" : redirectTo),
                        },
                        success: function (data) {
                            $("#details").html(data);
                        },
                        error: function (data) { console.log("Data could not be retrieved") }
                    });
                    setTimeout(function () {  // Don't let this run again until delay expires
                        canRun = true;
                        if (slug != slugLastRun) {  //Once scrolling comes to rest, run it once to get info for currently focused cell
                            $.ajax({
                                url: get_detail_url,
                                type: 'POST',
                                headers: {
                                    'X-CSRFToken': getCookie('csrftoken')
                                },
                                data: {
                                    slug: slug,
                                    return: return_form,
                                    location: (typeof siteLocation == 'undefined' ? "" : siteLocation),
                                    redirect: (typeof redirectTo == 'undefined' ? "" : redirectTo),
                                },
                                success: function (data) {
                                    $("#details").html(data);
                                },
                                error: function (data) { console.log("Data could not be retrieved") }
                            });
                        }
                    }, delay)
                }
            });

allan · November 2022

In the new version, some sort of focus is still there but in a row outside the visible window, so you can't see the blue box but if you use the up and down arrows it does select a different row

Yes I'm seeing that in your demo as well. Thanks for pointing it out. I'll make some time to look into what is causing that (although I can't yet promise when I'm afraid).

I suspect the second issue is related.

Allan

mustafamond · November 2022

Thank you - I look forward to your response. I'll check back soon.

Do you need the sample pages to remain up?

allan · November 2022

At the moment no - thanks though. I think it can be produced with anything that has both Scroller and KeyTable enabled with server-side processing. I'll write back if I run into problems though.

Allan

mustafamond · November 2022

Much appreciated - you're support has been amazing!

mustafamond · November 2022

Hi Allan,

Thanks again for your help. I was just following up to check on the status of this issue. If a fix may be forthcoming soon, I'll prepare to upgrade - otherwise, my best bet is probably sticking with version 1.10 for the time being even though it's not perfect...

thanks!

allan · November 2022

Apologies, I've not had a chance to look into this yet, and I'm not yet sure when I will do. 1.10 for the time being might be the best option here. I've got this in our bug tracker, so when I do get to it, I'll post back here.

Allan

mustafamond · January 2023

Hi Allan, Happy New Year!. Just wondering if there has been any progress or at least an ETA? It would be nice to be able to upgrade to the new version soon. Thank you.

allan · January 2023

No sorry. I've got it in a bug, so I'll update when I've had a proper chance to look into it.

Allan

mustafamond · May 2023

Hello Allan - just checking back. Some of the bugs we are experiencing with the older version are causing a bit of a headache, so I was wondering if anyone had looked at getting the new versions to play together well so that we could upgrade.

Thanks!

allan · May 2023

I'm sorry - I've not had a chance to do so yet. Could you possibly put your example with the latest versions showing the issue back online please? The link above isn't resolving any more.

Thanks,
Allan

mustafamond · May 2023

Hi Allan,

I have put those pages back up at a new location: https://testin.lnni.com/dt_sample and https://testin.lnni.com/dt_sample_upgrade.

It'll tell you the pages are not secure - I have not update SSL on this server, so the certificates are not correct, but you can safely navigate to the pages.

Thank you so much for your help!

mustafamond · May 2023

Hi Allan, Just wondering if you have had a chance to look at the sample pages - when you have what you need from them, I'll remove them. Thanks!

mustafamond · June 2023

Hi Allan, sorry to be a pest - just checking in to see if you've had a chance to take a look and if I can take the sample pages down. Thanks! Would it be better to communicate directly or just keep it on this thread?

allan · June 2023

Apologies - I haven't yet. Are you able to keep them up or put them somewhere else for the moment?

Thanks,
Allan

mustafamond · June 2023

Hi Allan - just checking in. May I email you directly?

allan · July 2023

Sure thing - allan @ this domain.net.

Allan

mustafamond · November 2023

Thank you Allan for the fix to this situation. The updates to scroller.js and keytable.js seem to be working well and I am no longer experiencing the loss of focus or the issue of the table data going blank after pressing and holding the down arrow key - it now scrolls normally all the way through my table (even a table that has over 20,000 rows and uses serverside processing). I am now able to use datatables versin 1.13 with no problems.

Thank you for your time and effort to get this resolved.

Scrolling and info changes when upgrading from 1.10 to 1.12

Scrolling and info changes when upgrading from 1.10 to 1.12

Answers

Howdy, Stranger!

Categories

DataTables

Scrolling and info changes when upgrading from 1.10 to 1.12

Scrolling and info changes when upgrading from 1.10 to 1.12

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables