Datatable scrolling not working on mac book

yashpalchhajer

Hi,

I am using datatable and it is working fine initially,

but when we have multiple tables on same page and that loads on demand,
all tables have FixedHeader, FixedColumns and sorting is enabled also.

when any datatble has large data in and web page have multiple tables then scrolling get disappear both horizontal and vertical for some datatables. We have seen this issue mostly in MAC Book either chrome or safari.

There are no error messages shown in console
but when it refreshes sometimes it's scrolling working and sometime didn't.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

all tables have FixedHeader, FixedColumns

FIxedHeader and FIxedColmns are not compatible on the same table. From the FixedHeader docs:

Please note that FixedHeader is not currently compatible with tables that have the scrolling features of DataTables enabled (scrollX / scrollY). Please refer to the compatibility table for full compatibility details.

The FixedColumns extension uses scrollX which makes it incompatible with FixedHeader.

Kevin

allan

See also the compatibility matrix.

Allan

yashpalchhajer

Hi sorry for the delay,
here is a working jsfiddle.

https://jsfiddle.net/945uh2d7/

but issue we are facing is on macbook and it is like occasional.
in the example above is working fine.

main issue is I can't replicate it on jsfiddle or on my local machine. I am trying to post a video that describe this issue more.

kthorngren

but issue we are facing is on macbook and it is like occasional.

Have you checked the "Show scroll bars" setting in System Preferences > General? Try setting to "Always".

main issue is I can't replicate it on jsfiddle or on my local machine. I am trying to post a video that describe this issue more.

It would be difficult to troubleshoot without being able to debug the page.

Kevin

yashpalchhajer

Yes, it is difficult to troubleshoot without debug,

Actually our client is facing this issue, we are also not able to replicate it.

"Basically we are having multiple datatables on the page. Each datatable's html along with JS code is fetched via an ajax call and then response is inserted in an existing div within the document. Can it be a reason like html is inserted and datatable is initialized but once we insert the HTML into dom, it doesn't render as expected?

Should we do it this way -> Get just table HTML via ajax call and insert in DOM first. The second step will have a callback function where datatable will be initialized."

We are trying to get this replicated and get HTML from page which has issue, will sure provide replicated jsfiddle.

kthorngren

Can it be a reason like html is inserted and datatable is initialized but once we insert the HTML into dom, it doesn't render as expected?

Datatables won't know about any DOM updates. Its best to init Datatables after the inserting the HTML table.

Should we do it this way -> Get just table HTML via ajax call and insert in DOM first. The second step will have a callback function where datatable will be initialized."

Yes. Or you can use something like =api rows().invalidate() after loading the table, to have Datatables refresh its data cashe.

Sounds like maybe the Datatable initializes against an empty table then the HTML table is built and Datatables doesn't know about the data but it looks ot be apart of the Datatable. Does searching and sorting work if the scrollbar is not present?

Kevin

yashpalchhajer

Hi,
We change to draw datatable in callback, and also implemented rows().invalidate() method on table instance after draw.

but it didn't fix it.

One more thing is, we are not using fixedHeader option of datatable
we are using scrollY is this make any difference.

And for ubuntu in chrome it works fine, but in firefox when we hover on fixedColumns and scroll vertical, then it gets slower then we scroll over table body,
and horizontal scrolling is not working at all from fixedColumns.

colin

Please see earlier comments - FixedHeader is incompatible with scrolling.

Colin