[solved] Pagination with navybits:pagination

help
1

I’m trying to implement pagination with https://github.com/Navybits/meteor-pagination

I have user-created documents which I iterate like so:

   {{#each characters}}
    <li>
      <a href="/c/{{name}}"><img src="{{mainImg}}"></a>
      {{name}}
    </li>
     {{/each}}

But since on this site all documents that characters-collection has will be displayed I wanted to stack them by 20 per site with pagination.

I tried it like so
new_characters.js

Template.new_characters.helpers({
  dataToPaginate() {
    //return your data as an array of objects
    return Characters.find({isNpc: false}, {sort: {createdAt: -1}});
 },
})

new_characters.html

{{#navybitsPagination data=dataToPaginate}}
    <div>Name : {{name}} </div> <br>
{{/navybitsPagination}}

But this it not how it works. It just shows an interation of “Name :”. My questions are: How could I iterate those characters-documents and how could I determine how many documents per page are displayed?

2

I solved this with a collection that includes the count for a query on a collection and inserts it under the connectionId.

For publications where the count is needed, it returns an array of cursors, including one for the counting collection.

So I declare the collection on client and server

CollectionCount = new Mongo.Collection("collection_count");
PagedCollection = new Mongo.Collection("paged_collection");

And define this function on the server, including some house keeping

function CollectionCountUpdate(connectionId, cursor) {
  let collectionName = cursor._cursorDescription.collectionName;
  let maxCount = cursor.count();
  let ids = cursor.map((doc) => { return doc._id });
  var cc = CollectionCount.findOne({ connectionId: connectionId, collection: collectionName });
  var ccId = null;
  if (cc) {
    CollectionCount.update(cc._id, { $set: { maxCount: maxCount, ids: ids } });
    ccId = cc._id;
  } else {
    ccId = CollectionCount.insert({ connectionId: connectionId, maxCount: maxCount, ids: ids, collection: collectionName });
  }
  return CollectionCount.find(ccId);
}
Meteor.onConnection(function (connection) {
  const connectionId = connection.id;
  connection.onClose(function () {
    let c = CollectionCount.remove({ connectionId: connectionId });
    if (Meteor.isDevelopment) console.log(`onClose ${connectionId} removed ${c}`);
  });
});

Meteor.startup(function () {
  //
  // clear CollectionCount when server starts
  //
  CollectionCount.remove({});
});

In a publication I return two cursord, the requested cursor with the skip/limit and the count

Meteor.publish('somePaginatedCollection', function(query, options){
  const self = this;
  return [
    CollectionCountUpdate(self.connection.id, Collection.find(query)),
    PagedCollection.find(query, options),
  ];
});

On the client I now have easy access to the max count for pagination


Template.collection.onCreated(function(){
  const instance = self;
  instance.skip = new ReactiveVar(0);
  instance.autorun(function(){
    instance.subscribe('somePaginatedCollection', {whatever: true, iwant: {$gt:5}}, {skip: instance.skip.get(), limit: 10});
  })
});
Template.collection.helpers({
  maxCount(){
      CollectionCount.findOne({collection:'paged_collection'});
  }
});
3

Went with that tutorial: https://experimentingwithcode.com/paging-and-sorting-part-1/

Seemed a bit easier.

Thanks nonetheless!