Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Pagination and sorting example for emberjs website" />
<meta charset=utf-8 />
<title>JS Bin</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>
  <script src="http://builds.emberjs.com/ember-latest.js"></script>
</head>
<body>
  <script type="text/x-handlebars" data-template-name="application">
    <h2>Query Params: client-side sorting</h2>
    
    <p>
      In this example, we're not bothering querying
      the server for data but just sorting and
      paginating what we
      have already loaded on the client-side.
    </p>
    
    <p>
      <a href="http://jsbin.com/ucanam/2942">See here</a> for an example of
      how to opt into a full on transition
      that can re-query the server to manage
      pagination/sorting on the server side.
    </p>
    
    <p>
      Page: 
      {{#each n in pages}}
        {{linkTo n (query-params page=n)}}
      {{/each}}
      of {{pages.length}}
    </p>
    
    <p>
      {{#if previousPage}}
        {{link-to 'Previous' (query-params page=previousPage)}}
      {{else}}
        Previous
      {{/if}}
      
      {{#if nextPage}}
        {{link-to 'Next' (query-params page=nextPage)}}
      {{else}}
        Next
      {{/if}}
    </p>
    
    <h3>Sorting by {{sortBy}}</h3>
    <form {{action 'updatePageSize' on='submit'}}>
      Page size: 
      {{input value=newPageSize type="number"}}
      {{input type="submit" value="Change"}}
      
    </form>
    <table>
      <thead>
        <tr>
          <th>
            {{linkTo "First Name" (query-params sortBy="firstName")}}
          </th>
          <th>
            {{linkTo "Last Name" (query-params sortBy="lastName")}}
          </th>
          <th>
            {{linkTo "Location" (query-params sortBy="location")}}
          </th>
        </tr>
      </thead>
      <tbody>
        {{#each paged}}
          <tr>
            <td>{{firstName}}</td>
            <td>{{lastName}}</td>
            <td>{{location}}</td>
          </tr>
        {{/each}}
      </tbody>
    </table>
    
    
    
  </script>
  
</body>
</html>
 
.active {
  font-weight: bold;
}
​
table {
  width: 100%;
}
​
form {
  margin: 1em 0;
}
​
th {
  font-weight: normal;
}
 
App = Ember.Application.create();
​
App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    var FIRST_NAMES = ["Alex", "Kris", "Luke"];
    var LAST_NAMES =  ["Matchneer", "Selden", "Melia"];
    var people = [];
    for (var i = 0; i < 400; i++) {
      people.push(
        {
          firstName: FIRST_NAMES[Math.floor(Math.random() * 3)],
          lastName:  LAST_NAMES[Math.floor(Math.random() * 3)],
          location:  FIRST_NAMES[Math.floor(Math.random() * 3)] + "ville"
        });
    }
    return people;
  }
});
​
// Helper computed property used by nextPage
// and previousPage.
var incrementPage = function(amt) {
  return Ember.computed('page', 'numPages', function() {
    var newPage = parseInt(this.get('page'), 10) + amt;
    if (newPage <= parseInt(this.get('numPages'), 10) &&
        newPage >= 1) {
      return newPage;
    }
  });
};
​
App.ApplicationController = Ember.ArrayController.extend({
  queryParams: ['sortBy', 'page', 'pageSize'],
  page: 1,
  pageSize: 25,
  sortBy: 'firstName',
  
  sortProperties: function() {
    return [this.get('sortBy')];
  }.property('sortBy'),
  
  pages: function() {
    var pageSize = this.get('pageSize'),
        l = this.get('model.length'),
        pages = Math.ceil(l / pageSize),
        pagesArray = [];
  
    for(var i = 0; i < pages; i ++) {
  pagesArray.push(i + 1);
    }
    
    return pagesArray;
  }.property('pageSize', 'model.length'),
  
  numPages: function() {
    var pageSize = this.get('pageSize'),
        l = this.get('model.length');
    return Math.ceil(l / pageSize);
  }.property('pageSize'),
    
  paged: function() {
    var page = this.get('page') - 1,
        pageSize = this.get('pageSize'),
        start = page * pageSize,
        end = start + pageSize;
    return this.get('arrangedContent').slice(start, end);
  }.property('page', 'arrangedContent', 'pageSize'),
   
  previousPage: incrementPage(-1),
  nextPage:     incrementPage(1),
    
  // We don't want updates to the newPageSize
  // input field to immediately update `pageSize`
  // (and therefore the URL), so we make this
  // binding read-only (and later explicitly
  // write `pageSize` inside the `updatePageSize`)
  newPageSize: Ember.computed.oneWay('pageSize'),
    
  actions: {
    updatePageSize: function() {
      this.set('pageSize', parseInt(this.get('newPageSize'), 10));
    }
  }
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
billybonkspro
0viewers