Trying to scroll to row and having scrollY set

dwe

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?

dwe

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

colin

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

dwe

here you go:
https://jsfiddle.net/n0dLo473/

colin

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

dwe

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?

kthorngren

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

dwe

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

colin

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.