Find the top visible row in table

brigosx

Hi to all. I would appreciate to know if there is any property or method of the datatables object for getting the top row which is visible after scrolling the table. Please note that I am not using the Scroller extension since it requires options that do not meet with the specifications of my web app. I've tried all the possible JQuery or Datatables events but with no luck.

Gea

Maybe Select extension is what u need.
See https://datatables.net/extensions/select/

brigosx

Dear Gea,

Thanks for your reply but unfortunately this is not the case. To clear up the things a bit let me explain the issue a bit more. We have customers which view a lengthy list of items which is getting refreshed in a constant amount of time (e.g. every 10 minutes) in order to display possible changes by other Users. The problem arises when they scroll up the list for a number of rows and then the list gets refreshed. In such case the list returns back to the first row instead of the one the User has moved to before the refreshing operation. I would like to get the row which will be at the top of the list every time the User scrolls up or down the datatables list but none of the JQuery on or scroll events seem to trigger after the scrolling. Idealy would be if there was any property that could give me the top (or bottom) row which is currently viewable at the moment just before the refresh.

Gea

I don't know how can i help u.
Hope someone can, luck!
Gea.

brigosx

Hi to all, eventually I have found a work-around. I hope someone else may be helped by this solution:

var top_row = 0;
var top_head = $('#flthead').offset().top + $('#flthead').height();
        
$('#fltlista tr').each(function (index, elem) {
  var offsy = $(elem).offset().top;
            
  if (top_row == 0 && offsy >= top_head) {
    top_row = index - 1;
    return;
}
});

After getting the top_row you can call something like the following snippet in order to move the table to the desired row:

if (top_row > 0) {
  var ret_row = $('#fltlista tr:eq('+top_row+')').get(0);
  ret_row.scrollIntoView(true);
}

where #fltheaad the FixedHead row and the #fltlista the scrollable table of the datatables object.

Cheers.

Gea

glad to ear that :)
Oh, if u are going to post code, use this to format him:
https://datatables.net/manual/tech-notes/8#Code
Regards!

allan

@brigosx - Thanks for posting your solution! There isn't a built in way to do what you are looking for, and the method you suggest is probably the best option available at the moment. It can be a bit slow since it needs to read the height of each row, but unless you require all rows be the same height (which is what my Scroller extension does), that's the way it is!

Allan