Ember.PaginationSupport

didRequestRange.js

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);
  }
});

pagination_support.js

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')
});

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

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>

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

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