first whack at pagination with backbone.js

paginated_collection.js

// includes bindings for fetching/fetched

PaginatedCollection = Backbone.Collection.extend({
  initialize: function() {
    _.bindAll(this, 'parse', 'url', 'pageInfo', 'nextPage', 'previousPage');
    this.page = 1;
  },
  fetch: function(options) {
    options || (options = {});
    this.trigger("fetching");
    var self = this;
    var success = options.success;
    options.success = function(resp) {
      self.trigger("fetched");
      if(success) { success(self, resp); }
    };
    Backbone.Collection.prototype.fetch.call(this, options);
  },
  parse: function(resp) {
    this.page = resp.page;
    this.perPage = resp.per_page;
    this.total = resp.total;
    return resp.models;
  },
  url: function() {
     return this.base_url + '?' + $.param({page: this.page});
  },
  pageInfo: function() {
    var info = {
      total: this.total,
      page: this.page,
      perPage: this.perPage,
      pages: Math.ceil(this.total / this.perPage),
      prev: false,
      next: false
    };

    var max = Math.min(this.total, this.page * this.perPage);

    if (this.total == this.pages * this.perPage) {
      max = this.total;
    }

    info.range = [(this.page - 1) * this.perPage + 1, max];

    if (this.page > 1) {
      info.prev = this.page - 1;
    }

    if (this.page < info.pages) {
      info.next = this.page + 1;
    }

    return info;
  },
  nextPage: function() {
    this.page = this.page + 1;
    this.fetch();
  },
  previousPage: function() {
    this.page = this.page - 1;
    this.fetch();
  }

});

paginated_view.js

PaginatedView = Backbone.View.extend({
  initialize: function() {
    _.bindAll(this, 'get_previous', 'get_next', 'render');
    this.collection.bind('refresh', this.render);
  },
  events: {
    'click a.prev': 'previous',
    'click a.next': 'next'
  },
  render: function() {
    this.el.html(app.templates.pagination(this.collection.pageInfo()));
  },

  previous: function() {
    this.collection.previousPage();
    return false;
  },

  next: function() {
    this.collection.nextPage();
    return false;
  }
});

pagination.jst

<% if(pages > 1) { %>
  <% if(prev) { %>
    <a href="#" class="prev">previous</a>
  <% } else { %>
    <span>previous</span>
  <% } %>

  <%= range[0] %>..<%= range[1] %> of <%= total %>

  <% if(next) { %>
    <a href="#" class="next">next</a>
  <% } else { %>
    <span>next</span>
  <% } %>
<% } %>

Seemed that there isn't a single solution out there except for this, so I've improved on this code a bit and released it as a github project.

Hope this helps. :)

good stuff, ty!