3

I am using datatable for displaying data in the grid, everything works fine except for one issue (cosmetic issue).

When users go to end of page 1(now the scroll bar is at the end of the grid) and when they click any of the pagination buttons (next / previous / first / last), the scroll bar doesn't go back to top instead it stays the same position where it was on the previous page. Is there a way to reset the scrollbar position?

EDIT: The scrollbar I referred here is datatable scroll bar (class:dataTables_scrollBody)

3
  • after click of pagination, is it refreshing the whole page or just table rows? Jan 9, 2013 at 19:14
  • I bind the grid with local data (on load), it doesn't refresh the whole page on click rather just refreshes table data...
    – Learner
    Jan 9, 2013 at 19:17
  • jsfiddle.net/vesteraas/PTuNL/3 - see this link, it may help you to scroll top to the table once you click pagination Jan 9, 2013 at 20:30

2 Answers 2

7

I figured out a way to move the scroll bar to the top of datatables. Just need to add this to fndrawcallback function.. sharing the code below.....

"fnDrawCallback": function(o) {
                    $('.dataTables_scrollBody').scrollTop(0);
                }
1

You could use Javascript to scoll to the top: http://www.w3schools.com/jsref/met_win_scrollto.asp

<a onclick="window.scrollTo(0,0)">next / previous / first / last</a>

Or you could create a HTML-Anchor at the top of your page: http://www.hypergurl.com/anchors.html

<a name="top">Put this to the top of your page</a>

<a href="#top">next / previous / first / last</a>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.