Send a JSON collection with custom headers to describe the entire paginated collection. This removes mixing meta data about the paginated collection with the actual data we want to work with.

protocols_collection.js

// using Backbone.Pageable https://github.com/wyuenho/backbone-pageable

App.Collections.Protocols = Backbone.PageableCollection.extend({
  model: App.Models.Protocol,
  url: '/protocols',

  state: {
    firstPage: 1,
    currentPage: 1,
    pageSize: 100
  },

  queryParams: {
  },

  parse: function(response, options) {
    this.currentPage = parseInt(options.xhr.getResponseHeader('X-Current-Page'));
    this.totalPages = parseInt(options.xhr.getResponseHeader('X-Total-Pages'));
    return response;
  }
});

protocols_controller.rb

class ProtocolsController < ApplicationController
  respond_to :json
  
  # ...

  def index
    @protocols = Protocol.ordered.paginate(page: params[:page], per_page: 100)
    response.headers['X-Current-Page'] = @protocols.current_page.to_s
    response.headers['X-Total-Pages'] = @protocols.total_pages.to_s
    respond_with @protocols
  end

  # ...

end