scroller plugin scroll table with keypress

scroller plugin scroll table with keypress

visceralistvisceralist Posts: 33Questions: 0Answers: 0
edited January 2014 in Plug-ins
Hi

I asked this question elsewhere but I think it may have been too general. I am using the scroller plugin and I want to know how to scroll the table up/down using keyboward keydown event; i've got the events wired up, I just don't know the syntax for scroller API.

I tried doing this:

[code]
this.myTable.dataTable({
"sScrollY": "200px",
"sDom": "frtiS",
"bDeferRender": true,
"fnInitComplete": function () {
this.fnSettings().oScroller.fnScrollToRow(1000);
}
});
[/code]

but i get Cannot call method 'dataTable' of undefined error message with that. so basically I need to be able to hit arrow down on the page (without click inside the table first) and scroll down about 30px and scroll up when I hit the arrow up.

any info would help.
thanks

Replies

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin
    > but i get Cannot call method 'dataTable' of undefined error message with that.

    Can you show me a test page showing that error please? I don't understand why hat would be happening with the above code.

    Allan
  • visceralistvisceralist Posts: 33Questions: 0Answers: 0
    I read somewhere that that error happens if the datatable is initialized already in the page; above that code, earlier in the page on my loadsuccesscallback function, I am initializing the datatable:

    [code]
    this.tableAccounts.dataTable({
    "sScrollY": "400px",
    "aaData": tableData,
    "sDom": "tiS",
    "bDeferRender": true...
    [/code]

    and I am sorry man, I know this would have been a lot simpler if I could link a page but its behind the damn firewall. :(
  • visceralistvisceralist Posts: 33Questions: 0Answers: 0
    here's the jsFiddle of how it looks so far:

    http://jsfiddle.net/visceral/Qymnv/1/

    "aaData": tableData, is where data coming from the db.
  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin
    If you look at your browser's console, you'll see that you have a syntax error here:

    [code]
    $(document).bind('keydown', function (event) {
    PageDown) {

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

    (second line).

    Have a look at this Fiddle http://jsfiddle.net/CN4UZ/5/ - original source: http://stackoverflow.com/questions/8681162/intercept-pageup-pagedown-keydown-events-in-chrome-browser .

    Allan
  • visceralistvisceralist Posts: 33Questions: 0Answers: 0
    sorry about that man that was my bad.. the first portion of that code looks like this:

    [code]
    $(document).bind('keydown', function (event) {

    if (event.keyCode === KeyCodes.PageDown) {
    $(".dataTables_scrollBody").scrollTop(50);
    }
    });
    [/code]
    with that I don't see any console errors; it scrolls the page down quickly and goes back to the top of the table. I added event.stoppropogation(); right after where I am calling the scrollTop(), but that didn't do much either.
  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin
    As I noted - you need to make the `50` a computed value - otherwise, obviously, it is always just going to scroll to 50 px. Get the current scroll position and then add or subtract a suitable value as needed, then apply that.

    I would also say, imho, that intercepting the page up / down button and having them do something that the user isn't expecting is a fairly bad idea. More or less no other page on the web does that, so they won't realise what is going on until they think about it.
  • visceralistvisceralist Posts: 33Questions: 0Answers: 0
    I am going to refactor to consider your first paragraph, and I certainly agree with the second paragraph as well; I am going to see if I can change some people's mind on that request.

    cheers mate, you've been quite helpful.
This discussion has been closed.