Trying to scroll to row and having scrollY set

Trying to scroll to row and having scrollY set

dwedwe Posts: 5Questions: 1Answers: 0

Hello,
This fiddle is working fine: https://jsfiddle.net/ouoawta2/ and almost what i need concerning scrolling.

I cannot display a long list, therefore show the list with scrollsetting -> scrollY: '38vh
As soon as the scrollY setting is set, the fiddle doesn't work anymore.

Any reason why this shouldn't be working with this dataTables setting?

This question has an accepted answers - jump to answer

Answers

  • dwedwe Posts: 5Questions: 1Answers: 0

    To be clear, the table setting is thus:
    var table = $('#example').DataTable({
    paging: false, scrollY:'38vh'
    });

    Also: Changing the scrollY setting to a larger value (200vh) is creating an extra scrollbar again in the window part of the fiddle and it will scroll again

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    This fiddle is working fine: https://jsfiddle.net/ouoawta2/ and almost what i need concerning scrolling.

    Could you provide a fiddle, please, that demonstrates the problem, with steps on how to reproduce the issue.

    Cheers,

    Colin

  • dwedwe Posts: 5Questions: 1Answers: 0
  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Thanks for the fiddle, but everything appears to be working to me. Can you provide steps please on how to reproduce the issue.

  • dwedwe Posts: 5Questions: 1Answers: 0

    everything is working for you? That would be strange... :-)

    So once you run the fiddle, you see that the datatable is scrolling to the 30st row?
    That is not happening for me (i use chrome borwser).
    When i remove
    scrollY : "38vh"
    from the code, the scroll happens and the 30st row is shown (you may need to press the run button on the fiddle again).
    When i have the scrollY no scrolling happens and the 1 row is still shown. (again you may want to press the run button again)

    What browser are you using that all is working for you?

  • kthorngrenkthorngren Posts: 20,148Questions: 26Answers: 4,736
    Answer ✓

    My guess is the jQuery selector you are using in this statement is not selecting the appropriate element in the Datatable once you enable scrollY.
    $('html, body').animate({ scrollTop: $row.offset().top }, 2000);

    I believe 'html, body' is selecting the whole page. Once you enable scrollY I would guess you would need a different selector. What that would be I don't know.

    However I would suggest using the Scroller extension. It has a row().scrollTo() API that should work. Here is the updated example with Scroller:
    https://jsfiddle.net/67kcphvm/

    Kevin

  • dwedwe Posts: 5Questions: 1Answers: 0

    hI kthorngren,

    Thanks for the answer. This will work for me!!
    I read the scroller plugin and it stated paging should be on, and that is what i didn't want.

    BUT I see now in the fiddle that, although paging is on, you can scroll down and up through the list instead of actually paging (backward forward buttons)

    So this will give me the required functionality. Thanks again!

    Regards, Daniël

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    everything is working for you? That would be strange... :-)

    Ah sorry, I entirely missed the part about the scrolling code at the end - I was just looking at scrolling by hand! Glad all sorted.

This discussion has been closed.