Scrolling feedback seems totally messed up - doesn't track scrolling properly

vsajip · June 2023

Link to test case:
None, see attached video below.

Debugger code (debug.datatables.net):

Cannot load debugger into Firefox, either as a bookmarklet nor via snippet in console.

Version 1.13.4 of datatables, 2.1.1 Scroller extension, jQuery 3.7.0.

Table initialized like this:

          table = $('#ti-table').DataTable({
            ajax:           '/get/my/data',
            scrollY:        tbh,
            deferRender:    true,
            serverSide:     true,
            processing:     true,
            ordering:       false,
            searching:      true,
            scroller:       true
          });

Error messages shown:
None.

Description of problem:
Feedback "Showing 1 to n of N entries" seems highly inaccurate - showing negative numbers sometimes, etc. See this mp4:

Note that even the initial scrolling of just a few rows shows no feedback. Note that this data is already prefetched in the browser by the initial AJAX call.

kthorngren · June 2023

Scroller 2.1.1 and Datatables 1.13.4 seems to work correctly in this SSP Example. The values displayed in the info element come from the values in the recordsTotal and recordsFiltered in the JSON response. See the SSP protocol docs for more info.

I would start by using the browser's Network inspector tool to monitor the JSON response. Compare it to the values in the info element as you scroll. If they are the same then the server script is responding with incorrect values.

If you still need help please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren · June 2023

As a test try turning off the Scroller. Is the info element correct when you page through the table?

Are you using a Datatables supplied Server Side Processing script?

Kevin

vsajip · June 2023

Here is a link to a page which displays the problem:

https://app1.red-dove.com/

The table is on a page in a hidden tab (this affects how it needs to be initialized). From the above page, click "Grid tests" in the sidebar on the left and then on the "Test Stuff (Work in progress)" tab. You can see the table initialization in the testingreds.js file snippet. I'm using Firefox 114.0.

I'm not using explicit pagination, I'm looking for an "infinite scroll" type of operation, which is why I'm using the scroller.

I'm not using a Datatables provided script, but this is the initial JSON response (formatted for easier reading):

{
  "draw": 1,
  "recordsTotal": 3469032,
  "recordsFiltered": 3469032,
  "data": [
    ["3170074", "&#x27;Cichlasoma&#x27; facetum"],
    ["2619275", "&#x27;Cichlasoma&#x27; tembe"],
    ["672793", "&#x27;Gammarus&#x27; heteroclitus"],
    ["1988474", "Aa achalensis"],
    ["2119243", "Aa argyrolepis"],
    ["1792817", "Aa aurantiaca"],
    ["3301360", "Aa brevis"],
    ["1727054", "Aa calceata"],
    ["2325405", "Aa chiogena"]
  ],
  "result": "ok"
}

Notice that if you use the mouse scroll wheel to scroll the table contents, it scrolls OK, but the Datatables footer shows "Showing 1 to 5 of 3,469,032 entries" even when you scroll so that the top row is 2, 3, 4 etc.

It's a small window (5 rows) in my example because of the developer pane taking up part of the browser window, plus I'm using a largeish font size.

I also had to reduce the scrollY value given to Datatables, otherwise the "Showing 1 to 5 of 3,469,032 entries" doesn't appear.

let tbh = Math.trunc($('#ti-table tbody').height()) - 120;
...
{
  ...
   scrollY:        tbh,
  ...
}

Thanks,

Vinay

vsajip · June 2023

Here is a link to a page which displays the problem:

https://app1.red-dove.com/

The table is on a page in a hidden tab pane (this affects how it needs to be initialized). From the above page, click "Grid tests" in the sidebar on the left and then on the "Test Stuff (Work in progress)" tab. You can see the table initialization in the testingreds.js file snippet. I'm using Firefox 114.0.

I'm posting this reponse anew, the Internet seems to have swallowed up my previous attempt!

I'm not using explicit pagination - I want an "infinite scroll" type of user interaction, which is why I'm using the Scroller extension.

I'm not using a Datatables-provided SSP script, but the response provided from the server seems reasonable (formatted for easier reading):

{
  "draw": 1,
  "recordsTotal": 3469032,
  "recordsFiltered": 3469032,
  "data": [
    ["3170074", "&#x27;Cichlasoma&#x27; facetum"],
    ["2619275", "&#x27;Cichlasoma&#x27; tembe"],
    ["672793", "&#x27;Gammarus&#x27; heteroclitus"],
    ["1988474", "Aa achalensis"],
    ["2119243", "Aa argyrolepis"],
    ["1792817", "Aa aurantiaca"],
    ["3301360", "Aa brevis"],
    ["1727054", "Aa calceata"],
    ["2325405", "Aa chiogena"]
  ],
  "result": "ok"
}

Note that if you use the mouse wheel to scroll inside the table, the contents scroll OK, but the Datatables footer still shows e.g. "Showing 1 to 5 of 3,469,032 entries" even when you scroll so that the top row visible is not 1 but 2, 3, 4 etc.

I also had to kludge the scrollY passed to Datatables, otherwise the "Showing 1 to 5 of 3,469,032 entries" doesn't appear in the visible part of the window.

kthorngren · June 2023

I'm not using explicit pagination - I want an "infinite scroll" type of user interaction, which is why I'm using the Scroller extension.

Yes, I understand thats why I said "As a test try turning off the Scroller.".

Not sure if it will help but try using the correct scroller.bootstrap4.min.css as mentioned in your other thread. Not sure but it may have an impact on how Datatables calculates the display.

If not then @allan will need to take a look.

Kevin

allan · June 2023

A scrolling container, inside a scrolling container, inside a scrolling container. Nice!

You have:

table.scrollable > tbody {
  flex: 1 1 auto;
  display: block;
  overflow-y: auto;
}

in your CSS. That is almost certainly at least part of the issue. Remove the scrollable class from your table so that doesn't apply and just let DataTables' own scrolling do what it needs to do. display: block does not work for the tbody - it causes all sorts of problems, such as the column alignment you are seeing.

Allan

vsajip · June 2023

A scrolling container, inside a scrolling container, inside a scrolling container.

I know. Modern websites these days, eh?

Remove the scrollable class from your table so that doesn't apply

OK, I'll try that. It works well for scrollable content which is modest in size and doesn't require client-side support, but I can see why Datatables would expect to be in full control of its scrolling.

Thank you Allan & Kevin for your help. I will try your suggestions and see how i get on.

vsajip · June 2023

I've incorporated your suggestions, and my test page is looking a lot better - the scrolling and the column width issues are gone (thank you!). There are, however, some problems remaining, as illustrated by the first image below.

There are spurious outer scrollbars, both horizontal and vertical (apart from the one that's actually used to scroll the dataset). They seem to be caused by the Datatables table being just a few pixels too large for its container (in both dimensions).
The Search box added by Datatables doesn't line up horizontally with the table.
The table is entirely contained inside the "#ti-table-container" div, but if the height of the div is passed as the scrollY value as an option, the "Showing m to n of N entries" doesn't appear, as it's clipped out of view. To get it to appear, I kludged the height by subtracting 180 pixels, after which it does appear.
If the browser window width is made narrower (e.g. by docking the developer pane to the right), the "Showing ..." message wraps even though there seems to be plenty of horizontal space for the whole message (see last image).

Is there anything I can do to remove these problems? I'd be grateful for some hints on these, just as I am grateful for your quick responses to my questions.

allan · June 2023

1) On your id="ti-table-container" element add the class container, as that is required by Bootstrap if you are going to have a grid layout (which DataTables uses). The grid adds -15px left and right margins which is causing the horizontal overflow.

Also remove the overflow-auto class. And I would suggest you take a look at this blog post to have DataTables automatically fit the scroll container into the available area. It requires a little integration work, but I think it would be worth it for the layout you are creating.

2 and 3) Should be fixed by the above.

4) Handling this automatically will be in DataTables 2 (ready when it is ready... ). For now you probably need to modify the dom property which uses col-md-5 for the information column. Since you don't have any paging, you can just use col-md-12 for that one.

Allan

vsajip · June 2023

Great, thanks for those suggestions. They address the extraneous scrollbars, the search box positioning and the wrapping of the information column. However, perhaps because I removed the overflow-auto class, the table now exceeds the bounds of the window vertically, and you have to scroll down to see the information column and my other information panel which on this test page I've labelled with "Footer bit under table", and which I'd like visible at the foot of the table when the tab first opens. I realise that the scrollY value I passed (which was the original height of #ti-table-container) is used by Datatables not for the whole table, but for just the scrolling area div.datatables_scrollBody. How do I get it so that Datatables limits the vertical height of the entire component to a value passed in via options? I don't see an option which allows you to set the overall vertical height of the Datatables component for this use case.This is why I set up those multiple scrolling areas on my page - so that stuff such as would be in the place of "Footer bit under table" would be visible in the page right away, not requiring one to scroll down to see it.

allan · June 2023

the table now exceeds the bounds of the window vertically

Did you try the scroll resize component in the blog post I linked to? That would resolve that. It basically sets scrollY dynamically.

Allan

vsajip · June 2023

Did you try the scroll resize component in the blog post I linked to?

D'oh no, I didn't! Sorry for the noise.

vsajip · June 2023

I have now added the ScrollResize and PageResize plugins and configured with

scrollResize: true,
scrollCollapse: true,
pageResize: true

and the table still overflows the container. I'm not sure what additional integration work I need to do - please advise.

allan · June 2023

You need to set the height over your id=ti-table-container element to the correct height for the space available. The scrollResize plug-in will automatically restrict the table to that height, however if the container is allow to go to any height, then it will take as much as needed!

For example if I pop open the console and add a height of 200px to that element, then it works correctly.

You need to update your layout to fit that space exactly. That's beyond the scope of the support I can provide I'm afraid since it is generic CSS layout, but you might want to look into grid layout.

Also, don't use both scrollResize and pageResize at the same time.

Allan

vsajip · June 2023

When the Datatable is initialized, the height of #ti-table-container is (on my machine) 621 - as determined by CSS. However, because I set it up with a container class rather than overflow-auto as per your suggestion above, then I guess the container is free to grow vertically. So I just did a $('#ti-table-container').height(tbh) where tbh was just before obtained using $('#ti-table-container').height(). This works in this simple test scenario, but it does seem odd to force the height in this way using a style=height: XXX override, rather than letting CSS take care of it. On a window resize, normally CSS would sort out the relative heights of everything, but not once a value is explicitly set.

allan · June 2023

I guess the container is free to grow vertically.

That's the key bit. If you don't set a height, then it will grow vertically. Also, we don't want the container scrolling, so overflow: auto isn't the right solution.

The best way to handle it, as I say would be with CSS grids. That's how I would implement this myself. Absolutely positioned elements inside a relative container would be another option, but a grid would be much easier I think.

Allan

vsajip · June 2023

OK, thanks,

Scrolling feedback seems totally messed up - doesn't track scrolling properly

Scrolling feedback seems totally messed up - doesn't track scrolling properly

Answers

Howdy, Stranger!

Categories

DataTables

Scrolling feedback seems totally messed up - doesn't track scrolling properly

Scrolling feedback seems totally messed up - doesn't track scrolling properly

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables