FooTable
FooTable copied to clipboard
"Scroll Flicker" upon dynamically appending rows without pagination
Hello.
I am using footable.core.js, * @version 3.1.6
I turned off pagination so I can implement an "infinite scroll" by dynamically loading rows once the user reaches the bottom of the table.
ISSUE: There is a "scroll flicker" (page scrolls to top and then back down) that messes up the scrolling location.
I spent a lot of time debuging and I understand why (I think) this happens but not sure how to fix it.
On line 1845, there is this line: ... if (detach) this.$el.detach();
I believe this line clears out the table by removing elements from the DOM, before redrawing the table and reattaching the elements.
It happens very fast but when the elements are detached, it causes the table to have 0 rows, which shrinks down the page height, forcing the scroll to go back to the top. Once the elements + new rows get reattached, it causes the page height to grow again. This causes the "scroll flicker" I am talking about.
I can resolve this "scroll flicker" by commenting out line 1845 above and manually removing the rows from table. BUT if I do this, filtering stops working.
Is there a way to resolve this so that filtering still works but this "scroll flicker" doesn't happen? My best bet would be to somehow instead of detaching the elements simply just adding the new elements without detaching.
May anyone help please?
Thank you in advance
So, I have discovered that this issue described above happens when using any jQuery version above 2.2.4. Lower versions work perfectly.
It's been pretty quiet so I am not sure who is monitoring this but there are issues using footable and newer versions of jQuery which cause the table to re-draw, have all elements temporarily removed and flicker.
Footable is in fact redrawing with jQuery 3 and above. This causes the table to be removed from the DOM and then quickly added back again. Does not happen in jQuey version before 3. Anyone know a way to disable this or how to get it working as it did before where it does not redraw the table everytime?