Datatable scroll back to the origin position after update


Topic: Datatable scroll back to the origin position after update

szaiftamas pro premium priority asked 10 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 10 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 pro premium priority commented 10 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 10 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
  • User: Pro
  • 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