Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
New Twiddle
import Ember from 'ember';
export default Ember.Component.extend({
tagName: "section",
page: 1,
paginateBy: 10,
paginatedItems: Ember.computed('amenities', '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('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);
}
}
});
import Ember from 'ember';
export default Ember.Component.extend({
tagName: "li"
});
import Ember from 'ember';
export default Ember.Component.extend({
tagName: "ul"
});
import Ember from 'ember';
export default Ember.Controller.extend({
paginateBy: 6
});
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;
}
});
<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 />
{{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>
{{#each teams as |team|}}
{{yield team}}
{{/each}}
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.