Updating Table, scroller, and maintaining the scroll position

[bhumis]

I am using Tablesorter along with "scroller" & "Filter" widgets.
The table data is updated periodically using some jquery code.
On every table update, the filter/sorting is maintained(after a $('#table').trigger('update'); ), however, the scroller moves back to the top and left most & i lose my scrolling positions.
Is there an option that i can disable the scroller getting reset on table updates.?

It is essentially the same issue - only i cannot use stickyHeaders in my scenario, since i also need to fix column:
#1166

[Mottie]

Hi @bhumis!

There are two scroller widget options that you can change:

• scroller_jumpToHeader - true by default - when true, it makes the table header jump into view when the table body is not scrolled to the top and while scrolling up the page.
• scroller_upAfterSort - true by default - when true, the scroller automatically scrolls the inner window back to the top after sorting.

Try setting both of those options to false. If that still does not provide the desired behavior, please let me know.

[bhumis]

Hey @Mottie
Thanks for getting back on this.

Actually i already have both the settings u mentioned to false, but still scroller jumps on every $('#table').trigger('update');

I think the 2 settings are working as expected on simple sort, however this is a different case where the data of table gets updated and i do $('#table').trigger('update'); to reapply the filter/sorter just like in: #1166

Here is an example that i made by tweaking the one in the same issue: https://jsfiddle.net/jd1rwocL/
Try scrolling the table and the scroller will jump on every trigger.update

[Mottie]

Oh, yeah... the scroller widget doesn't save the scroll position when you completely replace the contents.

You can modify the demo you shared - https://jsfiddle.net/Mottie/jd1rwocL/2/ - to reset the "tablesorter-scroller-table" element scroll position (there are two when you freeze a column) after an update.

  function updateData() {
    var $tblBody = $("#table1 tbody"),
      scrollPos = $(".tablesorter-scroller-table").scrollTop(),
      html = "";

    for (var i = 0; i < 20; ++i) {
      html += "<tr><td>" + i + "</td><td>" +
        (Math.floor(Math.random() * (1000000 - 100000)) + 100000) +
        "</td></tr>";
    }
    $tblBody.html(html);

    $("#table1")
      .one('updateComplete', function() {
        setTimeout(function() {
          $(".tablesorter-scroller-table").scrollTop(scrollPos);
        }, 200);
      })
      .trigger("update");
  }

Note: The reason $(".tablesorter-scroller-table") is not cached is because a new element with that class name is added for the frozen column on update.

[bhumis]

Ok, i see, can we do something similar to restore the horizontal scroll position too?
This fiddle, i added few more columns:https://jsfiddle.net/jd1rwocL/5/
If you scroll to left, scroller jumps back left most on every update.

[bhumis]

Also, i feel the setTimeout interval for restoring the scroller position is something that can vary based table size.
My actual data was quite huge and i had to set it at 400 (instead of 200) to make it work:

$("#table1")
.one('updateComplete', function() {
setTimeout(function() {
$(".tablesorter-scroller-table").scrollTop(scrollPos);
}, 400);
})
.trigger("update");

Would u think i might have to revisit and modify the interval as my table keeps getting huge ?

[Mottie]

You'll need to save the scrollLeft position of the main table (demo)

scrollLeft = $(".tablesorter-scroller > .tablesorter-scroller-table").scrollLeft()

then set the position after the scroller widget finishes it's set up.

I think to make this work no matter the size of the table, I would have to add a scroller specific triggered event or callback... which would occur after the "updateComplete" event.

[bhumis]

OK, that works for me, thanks so much for your help !!

Altough it would have been nice not to see the scroller moving back and forth on every update :) (like how it is in stickyHeaders with stickyHeaders_filteredToTop set to false)
Will be looking forward to the enhancement !!

[bhumis]

I also tested with different data sets of variable table sizes:

1. The fixed setTimeOut interval is really variable and needs to be tweaked very often.
   $("#table1")
   .one('updateComplete', function() {
   setTimeout(function() {
   $(".tablesorter-scroller-table").scrollTop(scrollPos);
   }, 400);
   })
   .trigger("update");
2. Also the scrolling back and forth becomes even more visible as data size grows and doesn't nice.

[Mottie]

Version 2.28.5 now triggers a "scrollerComplete" event on the table so you can bind to that event instead of the "updateComplete". Updated demo.

The delay/jumpiness will still occur because the of a few internal setTimeout functions... I hope to eliminate these once I have devised a cache system.