Meteor client-side pagination

Question

There's a collection Comments. Currently comments for the specfic Content are all published to the client.

Without pagination I can successfully render them in my template, insert new comments and enjoy the reactivity.

I'm fine at the moment with all comments sent to the client but I want to implement all-client-side pagination to visually simplify the page much like FB does.

Hare are the rules:

• Comments are always sorted by the creation timestamp ASC (newer at the bottom of the list)
• I need to show the total number of records in the collection (T)
• I need to show the total number of comments currently displayed (C)
• If there are more comments (C < T) I need to show a 'See more' link
• Initially I show 5 newest comments (or all of them if there're less than 5)
• New comments (pushed from the server) are instantly shown at the end of the list
• When I click the 'See more' link up to 10 extra comments (the newest from the currently invisible -- and all of them are older that those already shown) are shown in the beginning of the list

So effectively it could be like:

• have the minTime variable
• initially set it to the timestamp of the 5th newest comment
• when I click the link set it to the timestamp of the 10th newest comment older than the current value
• template renders all the comments not older than this value
• at some point calculate values C and T and save them

I tried to solve this with a bunch of Session variables but didn't succeed -- I think at some point getting and setting these vars from the template leads to recursion or what? Additional problem is that I don't reliably know the 'initial' moment when I should calculate the minTime for the 1st time -- comments may still not be synched when the template is created or rendered for the first time.

So, the question: what is the proper way to fulfill my requirements?

Answer 1

In the meantime there are tow Meteor package for doing client-side pagination, one within a table. I admit I didn't go through all your requirements because of the comment exchange with ram1 above, but the package may help:

https://atmosphere.meteor.com/package/reactive-table

https://github.com/alethes/meteor-pages

Answer 2

Solution:

Meteor.startup(function(){
    Session.set('number_of_visible_comments', 5);
});

Template.comments = function() {
    return Comments.find({content: id_of_content}, {
        sort: {timestamp: -1}, 
        limit: Session.get('number_of_visible_comments')
    });
};

Template.total_number_of_comments = function() {
    return Comments.find({content: id_of_content}).count();
};

Template.number_of_visible_comments = function() {
    return Session.get('number_of_visible_comments').count();
};

Template.comments.events({
    'click': function() {
        var count = Session.get('number_of_visible_comments') + 10;
        Session.set('number_of_visible_comments', count);
    }
});