I have a dataTable with infinite scrolling. I want to scroll to a selected row on table refresh

$('#table1').dataTable({
    'aaData': data,
    'aoColumns': columns,
    'bInfiniteScroll': true,
    'bColumnCollapse': true,
    'sScrollY': '200px'
});

$('#btnScroll').click(function(){
     $('.dataTables_scrollBody').scrollTo($('#table1 tbody tr').eq(3), 800);
});

But it does not scroll to the row

I have a dataTable with infinite scrolling. I want to scroll to a selected row on table refresh

$('#table1').dataTable({
    'aaData': data,
    'aoColumns': columns,
    'bInfiniteScroll': true,
    'bColumnCollapse': true,
    'sScrollY': '200px'
});

$('#btnScroll').click(function(){
     $('.dataTables_scrollBody').scrollTo($('#table1 tbody tr').eq(3), 800);
});

But it does not scroll to the row

• javascript
• jquery
• datatables

Share Improve this question Follow asked Jul 14, 2014 at 7:05 user544079user544079 16.6k4242 gold badges120120 silver badges172172 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You can use animate to scroll to your position

$('.dataTables_scrollBody').animate({
    scrollTop: $('#table1 tbody tr').eq(3).offset().top
}, 800)

DEMO

You are using the scrollTo plugin. Have you loaded it? You can write this without that plugin as follows:

var selectedRow = $('#table1 tbody tr').eq(3);
$('.dataTables_scrollBody').scrollTop(selectedRow.prop('offsetTop') - $('.dataTables_scrollBody').height()/2);