Find the top visible row in table

Find the top visible row in table

brigosxbrigosx Posts: 12Questions: 3Answers: 1

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.

This question has an accepted answers - jump to answer

Answers

  • GeaGea Posts: 33Questions: 13Answers: 1

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

  • brigosxbrigosx Posts: 12Questions: 3Answers: 1

    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.

  • GeaGea Posts: 33Questions: 13Answers: 1

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

  • brigosxbrigosx Posts: 12Questions: 3Answers: 1
    edited October 2018 Answer ✓

    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.

  • GeaGea Posts: 33Questions: 13Answers: 1

    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!

  • allanallan Posts: 63,799Questions: 1Answers: 10,514 Site admin

    @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

This discussion has been closed.