Skip to content

Instantly share code, notes, and snippets.

@zerowidth

zerowidth/paginated_collection.js

Created November 18, 2010 22:04
Show Gist options
  • Save zerowidth/705733 to your computer and use it in GitHub Desktop.
Save zerowidth/705733 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. zerowidth revised this gist Nov 18, 2010. 2 changed files with 30 additions and 24 deletions.
    30 changes: 29 additions & 1 deletion paginated_collection.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@

    PaginatedCollection = Backbone.Collection.extend({
    initialize: function() {
    _.bindAll(this, 'parse', 'url', 'nextPage', 'previousPage');
    _.bindAll(this, 'parse', 'url', 'pageInfo', 'nextPage', 'previousPage');
    this.page = 1;
    },
    fetch: function(options) {
    @@ -25,6 +25,34 @@ PaginatedCollection = Backbone.Collection.extend({
    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();
    24 changes: 1 addition & 23 deletions paginated_view.js
    View file
    Original file line number Diff line number Diff line change
    @@ -8,29 +8,7 @@ PaginatedView = Backbone.View.extend({
    'click a.next': 'next'
    },
    render: function() {
    var page_info = {};
    page_info.total = this.collection.total;
    page_info.page = this.collection.page;
    page_info.perPage = this.collection.perPage;
    page_info.pages = Math.ceil(page_info.total / page_info.perPage);

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

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

    page_info.range = [(page_info.page - 1) * page_info.perPage + 1, max];
    if(page_info.page > 1) {
    page_info.prev = page_info.page - 1;
    }
    else { page_info.prev = false; }
    if(page_info.page < page_info.pages) {
    page_info.next = page_info.page + 1;
    }
    else { page_info.next = false; }

    this.el.html(JST.pagination(page_info));
    this.el.html(app.templates.pagination(this.collection.pageInfo()));
    },

    previous: function() {
  2. zerowidth revised this gist Nov 18, 2010. 1 changed file with 15 additions and 0 deletions.
    15 changes: 15 additions & 0 deletions pagination.jst
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    <% 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>
    <% } %>
    <% } %>
  3. zerowidth created this gist Nov 18, 2010.
    37 changes: 37 additions & 0 deletions paginated_collection.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    // includes bindings for fetching/fetched

    PaginatedCollection = Backbone.Collection.extend({
    initialize: function() {
    _.bindAll(this, 'parse', 'url', '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});
    },
    nextPage: function() {
    this.page = this.page + 1;
    this.fetch();
    },
    previousPage: function() {
    this.page = this.page - 1;
    this.fetch();
    }

    });
    45 changes: 45 additions & 0 deletions paginated_view.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    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() {
    var page_info = {};
    page_info.total = this.collection.total;
    page_info.page = this.collection.page;
    page_info.perPage = this.collection.perPage;
    page_info.pages = Math.ceil(page_info.total / page_info.perPage);

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

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

    page_info.range = [(page_info.page - 1) * page_info.perPage + 1, max];
    if(page_info.page > 1) {
    page_info.prev = page_info.page - 1;
    }
    else { page_info.prev = false; }
    if(page_info.page < page_info.pages) {
    page_info.next = page_info.page + 1;
    }
    else { page_info.next = false; }

    this.el.html(JST.pagination(page_info));
    },

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

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