DataTables logo DataTables

via Ad Packs
iPad/touch/swipe with Scroller
  • tommcktommck
    Posts: 73
    So, I'm using Scroller and I'm on an iPad.. I'd love to use iScroll 4 (http://cubiq.org/iscroll-4) inside the scroller.

    I'm digging around seeing what it would entail, but I need to touch/swipe-enable Scroller.

    Anyone have any tips?
  • tommcktommck
    Posts: 73
    Here's my status...

    It makes me feel dirty hacking stuff like this up, but I really want the smooth acceleration and things that iScroll gives me.

    I changed fnScrollToRow and added fnScrollToOffset to the Scroller.js:

            "fnScrollToRow": function (iRow, bAnimate) {
                var px = this.fnRowToPixels(iRow);
                this.fnScrollToOffset(px, bAnimate);
            },
    
            "fnScrollToOffset": function (px, bAnimate) {
                if (typeof bAnimate == 'undefined' || bAnimate) {
                    $(this.dom.scroller).animate({
                        "scrollTop": px
                    });
                }
                else {
                    $(this.dom.scroller).scrollTop(px);
                }
            },
    

    Then, I have this running this code on the first draw of the table:

                            // add an ID to the scroll body so we can pass that to iScroll
                            var scrollBody = $('div#shoppingCartItemsViewContainer div.dataTables_scrollBody');
                            scrollBody.attr('id', 'tableContainer');
    
                            // calculate a bottom offset to tell iScroll about
                            var scrollBodyHeight = scrollBody.height();
                            var tableHeight = (self.getTableElement()).height();
                            var offsetBottom = tableHeight - scrollBodyHeight;
    
                            _debug('debug', 'scroller height = ' + scrollBodyHeight + ', tableHeight = ' + tableHeight + ', calculated offset = ' + offsetBottom);
    
                            // wire up an onScrollEnd Event handler for iScroll 
                            var scrollEnd = function () {
                                var iX = this.x;
                                var iY = this.y;
                                _debug('info', 'iScroll.onScrollEnd - iScroll coords = [' + iX + ',' + iY + ']');
    
                                // get the scroller control's top position
                                var scroller = _dataTable.oScroller;
                                var top = scroller.dom.scroller.scrollTop;
    
                                _debug('info', 'oScroller top = [' + top + ']');
                                
                                // add the iScroll y-offset to it (it's negative, so subtract)
                                var newTop = top - Math.round(iY);
                                _debug('info', 'oScroller NEW top = [' + newTop + ']');
    
                                // scroll the scroller to the new position and fire the scroll update method
                                _dataTable.oScroller.fnScrollToOffset(newTop, false);
                                _dataTable.oScroller._fnScroll();
    
                                _debug('info', 'resetting iScroll position to 0,0');
                                this._pos(0, 0);
                            };
    
                            // init the iScroll
                            new iScroll('tableContainer', { hScroll: false, offsetBottom: offsetBottom, onScrollEnd: scrollEnd });
    


    When we scroll past the bottom, the scroller seems to jump backwards sometimes. I'm not sure if it was meant to scroll like this...

    Any thoughts would be appreciated..

    T
  • allanallan
    Posts: 15,533
    You don't need any extra software to get scrolling to work in Safari in iOS with DataTables - just a two finger drag will do it (an obscure feature in Safari for iOS). The downside is that there aren't any scrollbars shown by default (in iOS 5 it appears that you can use CSS to have these scrollbars display) - for which you need 3rd party software - I guess that is why you are using it here? Scroller certainly hasn't been tested in this way, so I can't say if it would work or not - it might require a bit of debugging if you are seeing issues at the moment.

    Allan
  • tommcktommck
    Posts: 73
    Looks like this is a bug... when using server-side data and issuing an fnScrollToRow(someNumberLargerThanTheNumberAlreadyLoaded), it doesn't work. It only scrolls to the bottom of the data that is there..
  • tommcktommck
    Posts: 73
    for some reason, nobody seems to like 2 finger scroll.. they want 1 finger scroll...
  • tommcktommck
    Posts: 73
    actually, 2 finger dragging doesn't seem to work for me either....
  • tommcktommck
    Posts: 73
    one problem with 2 finger dragging, it doesn't have acceleration and momentum support, which is a big deal when you've got a large list to get through.
  • tommcktommck
    Posts: 73
    looks like, rather than using my new method, I can set "scrollTop" = to the new coords I want on the scrollBody div
  • allanallan
    Posts: 15,533
    tommck said: one problem with 2 finger dragging, it doesn't have acceleration and momentum support, which is a big deal when you've got a large list to get through.

    Agreed! The new scrolling options in iOS 5 should help with that since it will have momentum support. Until then, I guess it will require some library to integrate with Scroller in order to work as required, which might well involve some digging around in the code.

    Allan
  • tommcktommck
    Posts: 73
    Yeah, I'm actually getting pretty far with my hacks :)

    Do you have an iPad?
  • allanallan
    Posts: 15,533
    I can get access to one for the odd bit of testing. Sounds like you are doing some interesting stuff :-)

    Allan
  • tommcktommck
    Posts: 73
    If I get stuff to work, I'll send you the code I have. Do you agree that the fnScrollToRow issue I mentioned above is a bug?
  • allanallan
    Posts: 15,533
    I'm not sure I quite understand - you've added fnScrollToOffset which looks fair enough - but what is the bug?
  • tommcktommck
    Posts: 73
    If the table only has 20 rows, and I tell it to scroll to row #60, it fetches new data and positions it so that the top row is row 21, not row 60. Are you not experiencing that?
  • allanallan
    Posts: 15,533
    If the table only have 20 rows, how can you scroll to row 60? Or have I missed something?
  • tommcktommck
    Posts: 73
    I'm using Scroller to do virtual scrolling... the # of rows -currently- in the table is 20, but I want to scroll to the 60th row (there are hundreds of rows in the collection).
  • allanallan
    Posts: 15,533
    Oh I see. In that case, I'm afraid I'm not hitting the same problem as you - when I use fnScrollToRow it jumps to the required position, regardless of the data source. I might be missing something in my setup possibly though, but I'm not sure what.
  • tommcktommck
    Posts: 73
    So, it stays at that empty spot and keeps loading data until the viewport is full? Hmm.. I must be doing something wrong...
  • tommcktommck
    Posts: 73
    By the way, I'm writing this as a separate plugin. Do you have a list of previously taken "cFeature" values?
  • allanallan
    Posts: 15,533
    I've only got one on my local machine (which I'm not at at the moment, so can't post...) but generally speak no - there isn't a public list. It's something I mean to do, and might write a little blog post about at some point. Generally speaking plug-ins should be capital letters. Off the top of my head T (TableTools), R (ColReorder), C (ColVis) and S (Scroller). The others I think are initialised in other ways.

    Allan
This discussion has been closed.
← All Discussions

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Support

Get useful and friendly help straight from the source.

In this Discussion