Pagination Over EmberJS Store

storepagination.coffee

Ember.FEATURES['ember-routing-drop-deprecated-action-style'] = true
App = Ember.Application.create({})
App.IndexController = Ember.ArrayController.extend(
  page: 5
  perPage: 10
  start: (->
    page = @get("page")
    perPage = @get("perPage")
    (page - 1) * perPage
  ).property("page", "perPage")
  end: (->
    page = @get("page")
    perPage = @get("perPage")
    page * perPage
  ).property("page", "perPage")
  paginatedContent: (->
    page = @get("page")
    perPage = @get("perPage")
    start = (page - 1) * perPage
    end = page * perPage
    paginatedContent = @get("content").slice(start, end)
  ).property("content.[]", "page", "perPage")
  pages: (->
    result = parseInt(@get('content.length') / @get('perPage'))
    ++result if @get('content.length') % @get('perPage') > 0
    result
  ).property('content.[]', 'perPage')
  hasPrevious: (-> @get('page') > 1).property('page')
  hasNext: (-> @get('page') + 1 < @get('pages')).property('page', 'pages')
  showBeforeElipsis: (-> @get('visiblePages.firstObject') > 3).property('visiblePages.[]')
  showAfterElipsis:  (-> Math.abs(@get('lastPage') - @get('visiblePages.lastObject')) > 2).property('visiblePages.[]', 'lastPage')

  visiblePages: (->
    pages = @get('pages')
    page  = @get('page')

    limit = 5
    limit = pages if pages < 5
    finish   = (start,limit)-> start + limit - 1
    start = page - parseInt(limit / 2)
    start = pages - limit + 1 if finish(start,limit) > pages
    start = 1 if start < 1
    [start..finish(start,limit)]
  ).property('page', 'pages')
  actions:
    goToNextPage: ->
      @incrementProperty('page') if @get('hasNext')  
    goToPreviousPage: ->
      @decrementProperty('page') if @get('hasPrevious')
    goToPage: (pageNumber)->
      @set('page', pageNumber) if pageNumber >= 1 && pageNumber <= @get('lastPage')
      @set('page', pageNumber)
  
)
App.Index = DS.Model.extend(
  firstName: DS.attr("string")
  lastName: DS.attr("string")
)
App.IndexRoute = Ember.Route.extend(setupController: (controller, names) ->
  @store.pushPayload "index", data
  storeData = @store.all("index")
  controller.set "model", storeData
  return
)
App.PaginationPageComponent = Em.Component.extend
  isCurrent: (-> @get('currentPage') == @get('page')).property('currentPage', 'page')
  tagName: 'li'
  classNameBindings: ['isCurrent:disabled']
  actions:
    pageClicked: ->
      @sendAction('action', @get('page'))
data = index: [
  {
    id: 0
    firstName: "Anthony"
    lastName: "Mills"
  }
  {
    id: 1
    firstName: "Briggs"
    lastName: "Christian"
  }
  {
    id: 2
    firstName: "Horn"
    lastName: "Nicholson"
  }
  {
    id: 3
    firstName: "Pierce"
    lastName: "Bonner"
  }
  {
    id: 4
    firstName: "Hillary"
    lastName: "Tyler"
  }
  {
    id: 5
    firstName: "Best"
    lastName: "Larson"
  }
  {
    id: 6
    firstName: "Carole"
    lastName: "Goodman"
  }
  {
    id: 7
    firstName: "Laura"
    lastName: "Hendricks"
  }
  {
    id: 8
    firstName: "Gentry"
    lastName: "Livingston"
  }
  {
    id: 9
    firstName: "Lopez"
    lastName: "Tyson"
  }
  {
    id: 10
    firstName: "Wagner"
    lastName: "Duncan"
  }
  {
    id: 11
    firstName: "Lindsay"
    lastName: "Garrison"
  }
  {
    id: 12
    firstName: "Schroeder"
    lastName: "Nichols"
  }
  {
    id: 13
    firstName: "Hunter"
    lastName: "Bolton"
  }
  {
    id: 14
    firstName: "Stefanie"
    lastName: "Reese"
  }
  {
    id: 15
    firstName: "Crosby"
    lastName: "Floyd"
  }
  {
    id: 16
    firstName: "Geneva"
    lastName: "Jacobson"
  }
  {
    id: 17
    firstName: "Marta"
    lastName: "Clay"
  }
  {
    id: 18
    firstName: "Lila"
    lastName: "House"
  }
  {
    id: 19
    firstName: "Ballard"
    lastName: "Barron"
  }
  {
    id: 20
    firstName: "Davidson"
    lastName: "Navarro"
  }
  {
    id: 21
    firstName: "Cummings"
    lastName: "Nguyen"
  }
  {
    id: 22
    firstName: "Claudette"
    lastName: "Warner"
  }
  {
    id: 23
    firstName: "Kelly"
    lastName: "Foley"
  }
  {
    id: 24
    firstName: "Odonnell"
    lastName: "Kramer"
  }
  {
    id: 25
    firstName: "Mendez"
    lastName: "Goff"
  }
  {
    id: 26
    firstName: "Teri"
    lastName: "Foreman"
  }
  {
    id: 27
    firstName: "Hayes"
    lastName: "Durham"
  }
  {
    id: 28
    firstName: "Emilia"
    lastName: "Fitzpatrick"
  }
  {
    id: 29
    firstName: "Colette"
    lastName: "Barnett"
  }
  {
    id: 30
    firstName: "Chang"
    lastName: "Johns"
  }
  {
    id: 31
    firstName: "Ramos"
    lastName: "Klein"
  }
  {
    id: 32
    firstName: "Sallie"
    lastName: "Walton"
  }
  {
    id: 33
    firstName: "Andrews"
    lastName: "Strong"
  }
  {
    id: 34
    firstName: "Benjamin"
    lastName: "Dickerson"
  }
  {
    id: 35
    firstName: "Tameka"
    lastName: "Byrd"
  }
  {
    id: 36
    firstName: "Cynthia"
    lastName: "Rowe"
  }
  {
    id: 37
    firstName: "Walter"
    lastName: "Hamilton"
  }
  {
    id: 38
    firstName: "Horton"
    lastName: "Monroe"
  }
  {
    id: 39
    firstName: "Heath"
    lastName: "Rios"
  }
  {
    id: 40
    firstName: "Wolf"
    lastName: "Bauer"
  }
  {
    id: 41
    firstName: "Cristina"
    lastName: "Ashley"
  }
  {
    id: 42
    firstName: "Callahan"
    lastName: "Mack"
  }
  {
    id: 43
    firstName: "Wynn"
    lastName: "Allen"
  }
  {
    id: 44
    firstName: "Luella"
    lastName: "May"
  }
  {
    id: 45
    firstName: "Kitty"
    lastName: "Ball"
  }
  {
    id: 46
    firstName: "Jacobs"
    lastName: "Skinner"
  }
  {
    id: 47
    firstName: "Hobbs"
    lastName: "Vang"
  }
  {
    id: 48
    firstName: "Aileen"
    lastName: "Strickland"
  }
  {
    id: 49
    firstName: "Dorsey"
    lastName: "Thomas"
  }
  {
    id: 50
    firstName: "Marguerite"
    lastName: "Hunter"
  }
  {
    id: 51
    firstName: "Valarie"
    lastName: "Vega"
  }
  {
    id: 52
    firstName: "Elma"
    lastName: "French"
  }
  {
    id: 53
    firstName: "Lenora"
    lastName: "Palmer"
  }
  {
    id: 54
    firstName: "Hicks"
    lastName: "Chavez"
  }
  {
    id: 55
    firstName: "Henrietta"
    lastName: "Wilkinson"
  }
  {
    id: 56
    firstName: "Joyce"
    lastName: "Flowers"
  }
  {
    id: 57
    firstName: "Elliott"
    lastName: "Edwards"
  }
  {
    id: 58
    firstName: "Black"
    lastName: "Padilla"
  }
  {
    id: 59
    firstName: "Jeanine"
    lastName: "Adams"
  }
  {
    id: 60
    firstName: "Caldwell"
    lastName: "Crane"
  }
  {
    id: 61
    firstName: "Roberta"
    lastName: "Cole"
  }
  {
    id: 62
    firstName: "Roth"
    lastName: "Castillo"
  }
  {
    id: 63
    firstName: "Peters"
    lastName: "Gomez"
  }
  {
    id: 64
    firstName: "Mcdowell"
    lastName: "Pace"
  }
  {
    id: 65
    firstName: "Mattie"
    lastName: "Small"
  }
  {
    id: 66
    firstName: "Stark"
    lastName: "Hatfield"
  }
  {
    id: 67
    firstName: "Manuela"
    lastName: "Kirby"
  }
  {
    id: 68
    firstName: "Erika"
    lastName: "Dillard"
  }
  {
    id: 69
    firstName: "Holmes"
    lastName: "Crawford"
  }
  {
    id: 70
    firstName: "Dale"
    lastName: "Roman"
  }
  {
    id: 71
    firstName: "Margret"
    lastName: "Garrett"
  }
  {
    id: 72
    firstName: "Shannon"
    lastName: "Hickman"
  }
  {
    id: 73
    firstName: "Georgina"
    lastName: "Holloway"
  }
  {
    id: 74
    firstName: "Hebert"
    lastName: "Carter"
  }
  {
    id: 75
    firstName: "Dolly"
    lastName: "Blackwell"
  }
  {
    id: 76
    firstName: "Crawford"
    lastName: "Sheppard"
  }
  {
    id: 77
    firstName: "Bettye"
    lastName: "Carey"
  }
  {
    id: 78
    firstName: "Goodwin"
    lastName: "Lang"
  }
  {
    id: 79
    firstName: "Clara"
    lastName: "Zimmerman"
  }
  {
    id: 80
    firstName: "Violet"
    lastName: "Lowe"
  }
  {
    id: 81
    firstName: "Floyd"
    lastName: "Haynes"
  }
  {
    id: 82
    firstName: "Maritza"
    lastName: "Mathis"
  }
  {
    id: 83
    firstName: "Kerry"
    lastName: "Powers"
  }
  {
    id: 84
    firstName: "Munoz"
    lastName: "Rodriguez"
  }
  {
    id: 85
    firstName: "Kristine"
    lastName: "Mendez"
  }
  {
    id: 86
    firstName: "Cox"
    lastName: "Rosario"
  }
  {
    id: 87
    firstName: "Raymond"
    lastName: "Kane"
  }
  {
    id: 88
    firstName: "Berger"
    lastName: "Pearson"
  }
  {
    id: 89
    firstName: "Lane"
    lastName: "Sargent"
  }
  {
    id: 90
    firstName: "Aline"
    lastName: "Sutton"
  }
  {
    id: 91
    firstName: "Rose"
    lastName: "Prince"
  }
  {
    id: 92
    firstName: "Spencer"
    lastName: "Riley"
  }
  {
    id: 93
    firstName: "Cross"
    lastName: "Ellis"
  }
  {
    id: 94
    firstName: "Coffey"
    lastName: "Bender"
  }
  {
    id: 95
    firstName: "Olson"
    lastName: "Peck"
  }
  {
    id: 96
    firstName: "Elva"
    lastName: "Dale"
  }
  {
    id: 97
    firstName: "Chandra"
    lastName: "Wagner"
  }
  {
    id: 98
    firstName: "Peck"
    lastName: "Howell"
  }
  {
    id: 99
    firstName: "Luann"
    lastName: "Dejesus"
  }
]

storepagination.html

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta name="description" content="Store paginationFinal" />
<meta charset=utf-8 />
<title>JS Bin</title>
  <script src="http://code.jquery.com/jquery-2.0.2.js"></script>
  <script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
  <script src="http://builds.emberjs.com/ember-latest.js"></script>
 <script src="http://builds.emberjs.com/ember-data-latest.js"></script>
  
  </head>
<body>
  <script type="text/x-handlebars" data-template-name="application">
    <h1>ember-latest jsbin</h1>
    {{outlet}}
  </script>
  
  <script type="text/x-handlebars" data-template-name="components/pagination-page">
  <a {{action "pageClicked"}}>{{page}}</a>
  </script>
  
  <script type="text/x-handlebars" data-template-name="index">
    <h2>Index Content:</h2>
   <div class="well">  Per page {{perPage}}, gran total {{pages}}, Has previous {{hasPrevious}}, has next {{hasNext}}, current page {{page}} </div>
    <ul class="list-group">
      {{#each paginatedContent}}
        <li class="list-group-item">{{firstName}} {{lastName}}</li>
      {{/each}}
    </ul> 
    <div class="btn-toolbar">
    <ul class="pagination">
      <li {{bind-attr class="hasPrevious::disabled"}}>
        <a {{action goToPreviousPage}}>&laquo;</a>
      </li>
      {{#if showBeforeEllipsis}}
        {{pagination-page page=1 currentPage=page}}
        <li class="disabled"><a>&hellip;</a></li>
      {{/if}}
      {{#each pageNumber in visiblePages}}
        {{pagination-page page=pageNumber currentPage=page action="goToPage"}}
      {{/each}}
      {{#if showAfterEllipsis}}
        <li class="disabled"><a>&hellip;</a></li>
        {{pagination-page page=lastPage currentPage=page}}
      {{/if}}
      <li {{bind-attr class="hasNext::disabled"}}>
        <a {{action goToNextPage}}>
          &raquo;
        </a>
    </ul>
  </div>

  </script>
</body>
</html>