Created
May 8, 2012 13:38
-
-
Save Tocacar/2635086 to your computer and use it in GitHub Desktop.
Infinite scrolling datatable plugin YUI 3.5.1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
YUI.add('dt-scroll', function(Y){ | |
Y.DtScroll = Y.Base.create('dt-scroll', Y.Plugin.Base, [], { | |
_scroll : true, | |
_scrollbarNode: null, | |
_loaderNode : null, | |
_noticeNode : null, | |
_datasource: null, | |
_page : 2, | |
initializer : function(config) { | |
this._scrollbarNode = config.scrollbarNode; | |
this._loaderNode = config.loaderNode; | |
this._noticeNode = config.noticeNode; | |
this._datasource = config.datasource; | |
this.bindUI(); | |
}, | |
bindUI : function() { | |
this._scrollbarNode.on('scroll', Y.bind(function(e) { | |
var scrollTop = this._scrollbarNode.get('scrollTop'); | |
var scrollHeight = this._scrollbarNode.get('scrollHeight'); | |
var tbodyHeight = parseInt(this._scrollbarNode.getComputedStyle('height')); | |
if ((scrollHeight - scrollTop - tbodyHeight) <= 1) { | |
if(!this._scroll) { | |
this._setNotice("I've hit rock bottom :("); | |
} else { | |
this._setNotice(); | |
this._loaderNode.addClass('loading'); //this relies on css rule that displays spinner gif (needs improving?) | |
this._datasource.sendRequest({ | |
request: '?page='+ this._page, | |
callback: { | |
success: Y.bind(function(e) { | |
if( e.data.statusText == "Unauthorized") { | |
window.location = "path/to/login/screen"; //have this url passed in with config?? | |
} | |
var data = e.response.results; | |
if(data.length > 0) { | |
try { | |
this._updateTable(data, 'add') | |
this._page = this._page + 1; | |
} | |
catch(e) { | |
this._page = this._page - 1; | |
this._loaderNode.removeClass('loading'); | |
} | |
} else { | |
this._setNotice(e.response.meta.msg); //expects a message from server, probably needs improving? | |
this._loaderNode.removeClass('loading'); | |
} | |
}, this), | |
failure : Y.bind(function (e) { | |
if( e.data && e.data.statusText == "Unauthorized") { | |
window.location = "path/to/login/screen"; //as above, pass in with config?? | |
} | |
this._loaderNode.removeClass('loading'); | |
this._setNotice(e.response.meta.msg); //expects a message from server | |
}, this) | |
} | |
}); | |
} | |
} else { | |
this._setNotice(); //this clears any message that might be showing from previous scrolls | |
} | |
}, this)); | |
}, | |
_setNotice : function(msg) { | |
if(msg) { | |
this._noticeNode.setHTML(msg); | |
this._noticeNode.addClass('display_notice'); //this relies on a css rule that displays the node (needs improving) | |
this._scroll = false; | |
} else { | |
this._noticeNode.empty(); | |
this._noticeNode.removeClass('display_notice'); | |
} | |
}, | |
_updateTable : function(data, id) { | |
var i, len, row, rows = []; | |
for (i = 0, len = data.length; i < len; i++) { | |
var new_data = {}; | |
if (!Y.Lang.isArray(row)) | |
row = Object.keys(data[i]); | |
Y.Array.each(row, function (item) { | |
new_data[item] = data[i][item]; | |
}); | |
rows.push(new_data); | |
} | |
this.get('host').get('data').add(rows); | |
this._loaderNode.removeClass('loading'); | |
} | |
}, | |
{ | |
NS : 'dtscroll', | |
ATTRS : {} | |
}); | |
}, '1.0.0', { | |
requires : [ 'plugin', 'base-build'] | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@godgav Glad you found it useful. Any chance you can share your extension code? Would be interesting to see it, if possible