Awesome

meteor-blaze-paginated-custom-list-examples

This repo contains three basic examples using luixal:blaze-paginated-custom-list meteor package for rendering item lists.

For running each of them you just have to go into the example directory you want to run, in example:

cd example-1

and run the meteor project:

meteor

And that's it.

Here are some screenshots of the rendered lists in the examples:

Examples

These examples use differente bootstrap themes from bootswatch. You can find them already packaged for Meteor in Atmosphere.

You can find the code for this examples here

Example 1

Using bootswatch's theme Sandstone and this item template:

<template name="book">
  <div class="panel panel-default">
    <div class="panel-body">
      "{{title}}" by {{author}} ({{points}} points)
    </div>
  </div>
</template>

and this options:

{
  template: 'book',
  collection: Books,
  paginationOptions: {
    perPage: 5,
    sort: {
      title: -1
    }
  },
  paginatorOptions: {
    limit: 4,
    containerClass: 'pull-right'
  },
  onItemClick: function(item) {
    console.log(item);
  }
}

looks like this:

Example 2

Using bootswatch's theme Superhero and this item template:

<template name="book">
  <div class="panel panel-success">
    <div class="panel-body">
      <strong class="text-uppercase">"{{title}}"</strong> by <span class="text-success">{{author}}</span> <span class="pull-right text-danger"><strong>{{points}}</strong></span>
    </div>
  </div>
</template>

and this options:

{
  template: 'book',
  collection: Books,
  paginationOptions: {
    perPage: 5,
    sort: {
      points: -1
    }
  },
  paginatorOptions: {
    limit: 4,
    containerClass: 'pull-right'
  },
  onItemClick: function(item) {
    console.log(item);
  }
}

looks like this:

Example 3

Using bootswatch's theme Simplex and this item template:

<template name="book">
  <strong class="text-uppercase">"{{title}}"</strong> by <span class="text-success">{{author}}</span>
  <div class="pull-right">
    <a href="#" class="btn btn-xs btn-danger"><i class="fa fa-pencil" aria-hidden="true"></i></a>
    <a href="#" class="btn btn-xs btn-primary"><i class="fa fa-times" aria-hidden="true"></i></a>
  </div>
</template>

and this options:

{
  template: 'book',
  collection: Books,
  ulClasses: 'list-group',
  liClasses: 'list-group-item',
  paginationOptions: {
    perPage: 5,
    sort: {
      name: -1
    }
  },
  paginatorOptions: {
    limit: 4,
    containerClass: 'pull-right'
  },
  onItemClick: function(item) {
    console.log(item);
  }
}

looks like this:

Example 4

Using bootswatch's theme Sandstone, the same item template, but a different mains template to show some magic controlling pagination:

<template name="booksList">
  <div class="col-md-4 col-md-offset-1">
    <h1>Books list: {{showingPerPage}}/{{totalItems}}</h1>
    {{> paginatedCustomList options=options}}
    {{#if allShown}}
      <a href="#" class=" col-md-12 btn disabled">No more books</a>
    {{else}}
      <a href="#" id="showMore" class=" col-md-12 btn btn-primary">show more books</a>
    {{/if}}
  </div>
</template>

these are the interesting helpers:

'showingPerPage': function() {
  if (PaginatedCustomList && PaginatedCustomList.getPagination('books')) return PaginatedCustomList.getPagination('books').perPage();
},

'totalItems': function() {
  if (PaginatedCustomList && PaginatedCustomList.getPagination('books')) return PaginatedCustomList.getPagination('books').totalItems();
},

'allShown': function() {
  let pagination = PaginatedCustomList.getPagination('books');
  if (pagination) return (pagination.perPage() >= pagination.totalItems());
}

and this is the button event handler:

'click #showMore': function() {
  let pagination = PaginatedCustomList.getPagination('books');
  pagination.perPage(pagination.perPage() + showMoreIncrement);
}

the example looks like this (before and after pressing the show more button):