question about scrolling datatable with page up/down

visceralist

Hi.

I am wanting to see how I can configure the datatable so that it listens to the pageup/down event and scroll the datable accordingly? currently, my datatable ScrollY is set to 400px: I am able to scroll the content of the datatable using the mouse wheel if the mouse is over the datatable area; or use the page up/down buttons to scroll accordingly if I click inside the datatable, setting focus to that area first before those buttons scroll the content up and down.

instead I need to be able to hit the page up/down anytime in the page containing the datable and have it scroll the content up/down.

suggestions?
thank you,

allan

I think the solution is probably just pure jQuery - attach an event listener to the document, and check for the page up/down keys. When pressed, use scrollTop on the scrolling element in the DataTable to move it.

Allan

visceralist

Hi Allan

thanks for your response and yes I knew it was going to be pure jquery and I pretty much have the part of the event listener covered; what I don't know however is what datatable function or command to call for each of those two listeners; do you have a code snippet for what to call in my listener to make the table scroll up or down?

thanks,

allan

Not off hand, but you would just use the jQuery scrollTop function on the scrolling container.

Allan

visceralist

something like this?
$(".dataTables_scrollBody").scrollTop();

allan

Looks fine :-)

visceralist

that didn't quite work :(

allan

In what way? Can you show us a test case?

visceralist

I can't actually share a link (behind firewall, but I will see if I can show my code...

I don't think I've got the syntax right on my keypress listener :(

visceralist

here's what I did on the keydown even listener inside the page that houses my datatable and the event is firing (I get a console.log) but the scroll isn't happening up or down.:

$('#data-table_wrapper').animate({ scrollTop: '0px' }, 800);

allan

> $('#data-table_wrapper')

You mentioned $(".dataTables_scrollBody") before. Are you adding the id?

Sorry, but we really need a test case to be able to help. I don't have time at the moment to create one myself I'm afraid.

visceralist

the $('#data-table_wrapper') is the id for the div that contains the datatable.

here's a visual representation of the page that contains the datatable

[code]
//main page container


//datatable beings here




























500 products



//datatable ends here



//main page ends here

[/code]

it's that datatable that is housed inside the page I want to be able to scroll up/down when keypress happens inside the main page.

visceralist

so I am using the datatable scroll plugin - any thoughts on how I can page up/down the table inside the page?
thanks,

allan

As before, use `$(".dataTables_scrollBody")` I would say. Unfortunately my live demo pages are down atm due to an attack, but would you not simply use something like:

[code]
$(".dataTables_scrollBody").scrollTop( 50 );
[/code]

Obviously the `50` would be calculated, but that's just an example.

Allan

visceralist

$(".dataTables_scrollBody").scrollTop( 50 ); -

all that does is nudge the scrollbar up and down briefly and returns back to where it was - at the top of the scrollbar / top of the table :(

tangerine

Have you tried any other numbers?

[quote]allan said: Obviously the 50 would be calculated, but that's just an example.[/quote]

visceralist

I did try other numbers. It jumps by that amount and goes back to the top of the table.