Skip to content

Instantly share code, notes, and snippets.

@joewest
Created January 13, 2012 20:14
Show Gist options
  • Save joewest/1608481 to your computer and use it in GitHub Desktop.
Save joewest/1608481 to your computer and use it in GitHub Desktop.
Ember.PaginationSupport
App.collectionController = Em.ArrayProxy.create(Ember.PaginationSupport, {
content: [],
fullContent: App.store.findAll(App.Job),
totalBinding: 'fullContent.length',
didRequestRange: function(rangeStart, rangeStop) {
var content = this.get('fullContent').slice(rangeStart, rangeStop);
this.replace(0, this.get('length'), content);
}
});
var get = Ember.get;
/**
@extends Ember.Mixin
Implements common pagination management properties for controllers.
*/
Ember.PaginationSupport = Ember.Mixin.create({
hasPaginationSupport: true,
total: 0,
rangeStart: 0,
rangeWindowSize: 10,
didRequestRange: Ember.K,
rangeStop: function() {
var rangeStop = get(this, 'rangeStart') + get(this, 'rangeWindowSize'),
total = get(this, 'total');
if (rangeStop < total) {
return rangeStop;
}
return total;
}.property('total', 'rangeStart', 'rangeWindowSize').cacheable(),
hasPrevious: function() {
return get(this, 'rangeStart') > 0;
}.property('rangeStart').cacheable(),
hasNext: function() {
return get(this, 'rangeStop') < get(this, 'total');
}.property('rangeStop', 'total').cacheable(),
nextPage: function() {
if (get(this, 'hasNext')) {
this.incrementProperty('rangeStart', get(this, 'rangeWindowSize'));
}
},
previousPage: function() {
if (get(this, 'hasPrevious')) {
this.decrementProperty('rangeStart', get(this, 'rangeWindowSize'));
}
},
page: function() {
return (get(this, 'rangeStart') / get(this, 'rangeWindowSize')) + 1;
}.property('rangeStart', 'rangeWindowSize').cacheable(),
totalPages: function() {
return Math.ceil(get(this, 'total') / get(this, 'rangeWindowSize'));
}.property('total', 'rangeWindowSize').cacheable(),
pageDidChange: function() {
this.didRequestRange(get(this, 'rangeStart'), get(this, 'rangeStop'));
}.observes('total', 'rangeStart', 'rangeStop')
});
@juanjardim
Copy link

Hi,

I was wondering if you can put some example with an html view, about how we could work with this "pagination_support.js" because I'm very new in Ember.js

Thank's

Juan

@bettysteger
Copy link

hi, i am also an emberjs-newbie,
but this is how my view looks like:

<div class="pagination">
  <ul>
    <li {{bindAttr class="hasPrevious::hidden"}}>
      <a {{action "previousPage" target="controller"}}>
        &larr; previous
      </a>
    </li>
    <li {{bindAttr class="hasNext::hidden"}}>
      <a {{action "nextPage" target="controller"}}>
        &rarr; next
      </a>
    </li>
  </ul>
</div>

@Stan92
Copy link

Stan92 commented Mar 3, 2013

Hi,
More than a newbie, I just discovered ember.js this week and it seems very interesting as framework...
I m facing to the same problem, do you have a complete implementation example (model, view, controller) ?
Thanks

@notmessenger
Copy link

Not based on this specific code, but is still the same general idea, and it has the example implementation you're asking about - https://github.com/notmessenger/emberjs-pageable

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment