Open Herteby opened 8 years ago
This is my implementation of infinite scroll. It's very hacky hehe but it's good enough for me. Maybe it'll give you some inspiration.
Template.reactiveTable.onCreated(function(){
var template = this,
rows = new ReactiveVar(30);
template.data.settings.rowsPerPage = rows;
Meteor.setInterval(function(){
//Constantly checking may look bad but it's more reliable than checking scroll events.
var id = template && template.context && template.context.id;
if(id){
var table = $('#' + id);
if($(window).height() + $(window).scrollTop() + 200 > table.offset().top + table.height()){
rows.set(rows.get() + 10);
}
}
},200);
});
Template.reactiveTable.events({
'click th.sortable': function(){
Template.instance().data.settings.rowsPerPage.set(30);
}
});
Cool, I like the idea of using rowsPerPage for this. I'm not sure about the best way to detect scrolling but your way looks fine. It might not work more generally if the table is in some scrollable div and not scrolling with the main page. Maybe I'll just put this in an example in the repo.
Hey, cool that you like it! :smile:
Oops, I forgot to clear the interval on template destruction! I changed line 6 to this:
template.infiniteScroll = Meteor.setInterval(function(){
And added this:
Template.reactiveTable.onDestroyed(function(){
Meteor.clearInterval(this.infiniteScroll);
});
Hmm, I'd like to show the number of rows at the top of the table, since I'm not using the navigation bar. Do you know how I can get that number from reactive-table?
There's not a good way to access it outside the table, but there's a template helper called 'getRowCount'. Since you're already using the template instance maybe it's possible for you to use it somehow.
Do you have any suggestion for what the neatest way of implementing infinite scroll for reactive-table might be? What if I simply set rowsPerPage to a reactive var that I increase when the user reaches the bottom? (And disable the navigation ofc) Would that work fine using the server-side pagination as well?
It would a sweet feature to put into the package btw!