AutoScroll to top

strannic

Height of my table exceed height of browser's window.
I add
"window.scrollTo(0, $(’#demo’).offset().top);"
to functions
"$(nFirst).click",
"$(nPrevious).click",
"$(nLast).click",
"$("span",oSettings.nPaginateList).click".
I hope, You can make it better and make "ScrollTop=true/false" for use this function.

P.S. Sorry. My English is crazy. But I hope, we can find a common language ;-)

allan

Hi strannic,

Thanks for the tip :-). Hopefully others will fine it useful.

You might also be interested in the discussion in this thread: http://datatables.net/forums/comments.php?DiscussionID=147&page=1#Item_5 . I've put together a paging plug-in which allows the paging controls to be used at bother the top and bottom of the table. It looks like you are using the full numbers paging, but my method could easily be adapted for that as well :-)

Regards,
Allan

strannic

Oh, It's a problem.
How make it for multiple tables on one page?

allan

Hi strannic,

What you need to do is modify the selector you are using for the scroll top ("$(’#demo’).offset().top"). At the moment that will scroll to the top of the #demo element - that needs to become the target table node. This can be obtained from oSettings.nTable.

Allan

strannic

yes ))
window.scrollTo(0, $('#'+oSettings.sTableId).offset().top);
It's universal ))

strannic

Dear Allan! Would you like to include this feature as standard function?

allan

Hi strannic,

Good stuff - glad to hear this works. I'll probably not include this in the main DataTables package for now (unless there is great demand for it!) since it is so easy to add. I might have a look at how an API function could be used to do this as well - which would be event better :-)

Allan

rubycat

I'd like to add the scroll to top function as well because when you're at the bottom of the page and you hit "next," depending upon the amount of information and the height of the browser window, it is very likely that you won't see the top of the next page.

But I'm stuck...is this even close? I'm working off what strannic started over a year ago:

[code]$(nFirst).click( function () {
if ( oSettings.oApi._fnPageChange( oSettings, "first" ) )
{
var targetOffset = $('#dt_example').offset().top;
$('html,body').animate({scrollTop: targetOffset}, 500);
return false;
fnCallbackDraw( oSettings );
}
} );[/code]

It seems to work and I could see doing that for first, previous, next and last but I don't know how to apply this functionality to the generated page numbers because the snippet he references must have changed. I also have a feeling my code sort of sucks so any help in that regard would be great as well.

allan

Hi rubycat,

I think a selector such as $('div.dataTables_paginate span').live('click', function() {...}); will catch all cases and return the scroll back to the top (when you are using the "full button" paging. Note the use of $().live() rather than click, since the DOM elements can change for the page numbers.

Allan

rubycat

Hi--thanks very much for the response. Oddly enough, the following code works for everything EXCEPT the individual page numbers (meaning it does work for first, previous, next and last elements):

[code]$('div.dataTables_paginate span').live('click', function() {
var targetOffset = $('#dt_example').offset().top;
$('html,body').animate({scrollTop: targetOffset}, 500);
return false;
} );[/code]

Am I doing something boneheaded??

allan

Do the pages actually change when using the code and clicking on the individual numbers? I'm wondering if the return false; is stopping the propagation? I don't see anything immediately obvious other than that... If you put in a bit of debug into your function (console.log, alert - whatever) does that run when you click on the numbers?

Allan

rubycat

Yup, the pages change when clicking on any of the pagination elements (numbers and um, what do I call the other stuff??). Removing the return false had no affect. Errr...I don't know how to put a bit of debug into my function. :-(

Am I correctly targeting the individual page numbers since they are structured like this (in layman's terms, a span within a span):
[code]

1
2
3
4

[/code]

allan

Yes the selector will pick up the inner elements as well, but I wonder now if it's picking it up twice. I think it will fire for the outer span, and then also the inner one... Try this, which will just pick up the first level spans (including the wrapper for the numbers:

[code]
$('div.dataTables_paginate>span').live('click', function() {
var targetOffset = $('#dt_example').offset().top;
$('html,body').animate({scrollTop: targetOffset}, 500);
return false;
} );
[/code]
If that doesn't work - try this and let us know if the alert shows up:

[code]
$('div.dataTables_paginate>span').live('click', function() {
alert('span clicked');
var targetOffset = $('#dt_example').offset().top;
$('html,body').animate({scrollTop: targetOffset}, 500);
return false;
} );
[/code]
Allan

rubycat

On the first code block, no change in functionality--the non-number pagination elements work while the individual page numbers change the page but no scrolling.

On the second code block, the alert fires and then the scrolling takes place but only for the non-number pagination elements.

I even tried simplifying the JS and no change:
[code]
// scroll smoothly back to the top upon page change but not working yet on indiv page numbers
$('div.dataTables_paginate span').live('click', function() {
$('body,html').animate({scrollTop:0},800);
} );
[/code]

allan

It looks like something internal to DataTables is cancelling the event propagation - I'm not sure why it would be doing that, so I've taken a note to look at it. However, in the mean time, here is an alternative option:

[code]
$(document).ready(function() {
var oldStart = 0;
$('#example').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"fnDrawCallback": function (o) {
if ( o._iDisplayStart != oldStart ) {
var targetOffset = $('#example').offset().top;
$('html,body').animate({scrollTop: targetOffset}, 500);
}
}
});
} );
[/code]
Regards,
Allan

rubycat

Thanks very much. Unfortunately, that doesn't seem to 100% work. For example, if I have 4 pages and am on page 2, neither First nor Previous works in terms of scrolling (the pages do change).

If I'm on page 3, Previous works but First doesn't. If I'm on page 4, Previous works but First doesn't.

allan

I forgot to update oldStart...

[code]
$(document).ready(function() {
var oldStart = 0;
$('#example').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"fnDrawCallback": function (o) {
if ( o._iDisplayStart != oldStart ) {
var targetOffset = $('#example').offset().top;
$('html,body').animate({scrollTop: targetOffset}, 500);
oldStart = o._iDisplayStart;
}
}
});
} );
[/code]
Allan

rubycat

Allan, thank you very much for the script and your patient follow-up assistance. This works fabulously. I am very grateful.

cmanva

Allan, Thank you for this great control and technical support.

Has there been a better solution for this..(not complaining). But, when I click next page or any of the page buttons..its a really slow reaction time to scroll or go the next page?

allan

Rather than running the animation, you could just set the scrollTop - that would be almost instant I would think.

Allan