AutoScroll to top
AutoScroll to top
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 ;-)
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 ;-)
This discussion has been closed.
Replies
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
How make it for multiple tables on one page?
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
window.scrollTo(0, $('#'+oSettings.sTableId).offset().top);
It's universal ))
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
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.
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
[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
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]
[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
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]
[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
If I'm on page 3, Previous works but First doesn't. If I'm on page 4, Previous works but First doesn't.
[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
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