Skip to content

Instantly share code, notes, and snippets.

@godgav
Forked from Tocacar/gist:2635086
Created September 8, 2012 17:35
Show Gist options
  • Save godgav/3677716 to your computer and use it in GitHub Desktop.
Save godgav/3677716 to your computer and use it in GitHub Desktop.
Infinite scrolling Extension for DataTable Scollable YUI 3.6.0
YUI.add('datatable-iscroll', function(Y){
var iScrollable = Y.DataTable.iScrollable = function() {};
iScrollable.ATTRS = {
scrollPageParam : { value : 'page'},
scrollStartPage : { value : 2 },
sizeParam : { value : 'size' },
scrollPageSize : { value : 10 },
unauthorizedPath : { value : '/' }
};
Y.mix(iScrollable.prototype, {
_scroll : true,
_requestInProgress : false,
initializer : function() {
this.after('renderView', Y.bind('_bindInfiniteScrollbar', this));
},
_bindInfiniteScrollbar : function() {
this._scrollbarNode.on('scroll', Y.bind(function(e) {
var scrollTop = this._scrollbarNode.get('scrollTop'),
scrollHeight = this._scrollbarNode.get('scrollHeight'),
tbodyHeight = parseInt(this._scrollbarNode.getComputedStyle('height')),
records,
startPage = this.get('scrollStartPage');
if (scrollHeight - scrollTop < 1.5 * tbodyHeight) {
if(this._scroll && !this._requestInProgress) {
this.datasource.load({
request: '?' + this.get('scrollPageParam') + '='+ startPage,
callback: {
success: Y.bind(function(e) {
this._redirectIf(e.data.statusText);
try {
records = (e.response && e.response.results) || [];
this.get('data').add(records);
this.set('scrollStartPage', startPage + 1);
} catch(e) {
window.console && console.log(e);
} finally {
this._requestInProgress = false;
}
}, this),
failure : Y.bind(function (e) {
e.data && this._redirectIf(e.data.statusText);
this._requestInProgress = false;
}, this)
}
});
this._requestInProgress = true;
}
}
}, this));
},
_redirectIf : function(statusText) {
if( statusText.indexOf("Unauthorized") >= 0) {
window.location = this.get('unauthorizedPath'); //have this url passed in with config??
}
}
});
Y.Base.mix(Y.DataTable, [iScrollable]);
}, '1.0.0', {
requires : ['datatable-base', 'datatable-scroll']
});
@godgav
Copy link
Author

godgav commented Sep 8, 2012

This extension created base on Tocacar's plugin. To use this extension it's enough only to declare module as dependency, something like:

YUI({
    modules : {
        'datatable-iscroll': {
            fullpath: '/scripts/modules/datatable-infinite-scroll.js',
            requires: ['datatable-base', 'datatable-scroll']
        }
    }
}).use("datatable", "datasource-io", "datasource-jsonschema", "datatable-datasource", 'datatable-iscroll', function (Y) {});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment