New Twiddle

components.list-pagination.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: "section",
  page: 1,
  paginateBy: 10,
  paginatedItems: Ember.computed('items', 'page', function(){
    var i = (parseInt(this.get('page')) - 1) * parseInt(this.get('paginateBy'));
    var j = i + parseInt(this.get('paginateBy'));
    return this.get('items').slice(i, j);
  }),
  numberOfPages: Ember.computed('items', 'page', function(){
    var n = this.get('items.length');
    var c = parseInt(this.get('paginateBy'));
    var r = Math.floor(n/c);
    if(n % c > 0) {
      r += 1;
    }
    return r;
  }),
  pageNumbers: Ember.computed('numberOfPages', function(){
    var n = Array(this.get('numberOfPages'));
    for(var i = 0;i < n.length;i++) {
      n[i] = i + 1;
    }
    return n;
  }),
  showNext: Ember.computed('page', function(){
    return (this.get('page') < this.get('numberOfPages'));
  }),
  showPrevious: Ember.computed('page', function(){
    return (this.get('page') > 1);
  }),
  nextText: 'Next page',
  previousText: 'Previous page',
  actions: {
    nextClicked() {
      if(this.get('page') + 1 <= this.get('numberOfPages')) {
        this.set('page', this.get('page') + 1);
      }
    },
    previousClicked() {
      if(this.get('page') > 0) {
        this.set('page', this.get('page') - 1);
      }
    },
    pageClicked(pageNumber){
      this.set('page', pageNumber);
    }
  }
});

components.team-list-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: "li"
});

components.team-list.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: "ul"
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  paginateBy: 6
});

routes.application.js

import Ember from 'ember';

let teams = [{
      id: 1,
      name: "Albania"
    },
    {
    id: 2,
    name: "Austria"
    },
    {
      id: 3,
      name: "Belgium"
    },
    {
      id: 4,
      name: "Croatia"
    },
    {
      id: 5,
      name: "Czech Republic"
    },
    {
      id: 6,
      name: "England"
    },
    {
      id: 7,
      name: "France"
    },
    {
      id: 8,
      name: "Germany"
    },
    {
      id: 9,
      name: "Hungary"
    },
    {
      id: 10,
      name: "Iceland"
    },
    {
      id: 11,
      name: "Italy"
    },
    {
      id: 12,
      name: "Northern Ireland"
    },
    {
      id: 13,
      name: "Poland"
    },
    {
      id: 14,
      name: "Portugal"
    },
    {
      id: 15,
      name: "Republic of Ireland"
    },
    {
      id: 16,
      name: "Romania"
    },
    {
      id: 17,
      name: "Russia"
    },
    {
      id: 18,
      name: "Slovakia"
    },
    {
      id: 19,
      name: "Spain"
    },
    {
      id: 20,
      name: "Sweden"
    },
    {
      id: 21,
      name: "Switzerland"
    },
    {
      id: 22,
      name: "Turkey"
    },
    {
      id: 23,
      name: "Ukraine"
    },
    {
      id: 24,
      name: "Wales"
    }
]

export default Ember.Route.extend({
  model() {
    return teams;
  }
});

templates.application.hbs

<p>This is an example showing how to create your own simple pagination component with Ember.</p>
<hr />
<p><strong>Euro 2016 teams:</strong></p>
{{#list-pagination paginateBy=paginateBy items=model as |teams|}}
  {{#team-list teams=teams as |team|}}
    {{#team-list-item}}
      {{team.name}}
    {{/team-list-item}}
  {{/team-list}}
{{/list-pagination}}
<hr />

templates.components.list-pagination.hbs

{{yield paginatedItems}}
<ul>
  {{#if showPrevious}}
    <li><button {{action "previousClicked"}}>{{previousText}}</button></li>
  {{else}}
    <li style="text-decoration: line-through;">{{previousText}}</li>
  {{/if}}
  {{#each pageNumbers as |pageNumber|}}
    <li><button {{action "pageClicked" pageNumber}}>Page {{pageNumber}}</button></li>
  {{/each}}
  {{#if showNext}}
    <li><button {{action "nextClicked"}}>{{nextText}}</button></li>
  {{else}}
    <li style="text-decoration: line-through;">{{nextText}}</li>
  {{/if}}
</ul>

templates.components.team-list-item.hbs

{{yield}}

templates.components.team-list.hbs

{{#each teams as |team|}}
  {{yield team}}
{{/each}}

twiddle.json

{
  "version": "0.9.3",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.6.0",
    "ember-data": "2.6.1",
    "ember-template-compiler": "2.6.0"
  }
}