Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Datatable scroll back to the origin position after update

szaiftamas priority asked 6 months ago


Expected behavior I would like to scroll back the vertical scroll bar after update the content without any trick. That trick what I found is time based, so it is absolutely dangerous! Do you have any better idea?

Actual behavior If I scroll down to the middle of the table content, and I after update the table, the scroll position will be on the top of the table and I need a trick now to scroll back.

Resources (screenshots, code snippets etc.)

var scrollTop = 0;

I can get the position with

scrollTop = table_el.querySelector('.datatable-inner').scrollTop;

but after the render, I need a setTimeout to the scroll back can be work

table_el.addEventListener('render.mdb.datatable', () => {
  setTimeout(setScroll, 100);
});

function setScroll() {
  var el = table_el.querySelector('.datatable-inner');
  el.scrollTop = scrollTop;
  var el_rail = table_el.querySelector('.ps__rail-y');
  el_rail.style.top = scrollTop + "px";
}

Kamila Pieńkowska staff answered 6 months ago


I've prepare a snippet for you. I run scroll update on button click so you can test it in the snippet. https://mdbootstrap.com/snippets/standard/kpienkowska/6157348


szaiftamas priority commented 5 months ago

Thank you for your answer, but unfortunately, I got an error for this snippets link.

  1. That's an error. The requested URL was not found on this server.

Kamila Pieńkowska staff commented 5 months ago

Added snippet should work now.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.0.1
  • Device: Laptop
  • Browser: Firefox
  • OS: Linux
  • Provided sample code: No
  • Provided link: No