Skip to content

Instantly share code, notes, and snippets.

@wpmnger

wpmnger/index.html

Created November 11, 2014 14:39
Show Gist options
  • Save wpmnger/c80047b13746995a11b3 to your computer and use it in GitHub Desktop.
Save wpmnger/c80047b13746995a11b3 to your computer and use it in GitHub Desktop.
Download ZIP
Pagination and sorting example for emberjs website // source http://jsbin.com/fayug
Raw
index.html
<!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>
<style id="jsbin-css">
.active {
font-weight: bold;
}
table {
width: 100%;
}
form {
margin: 1em 0;
}
th {
font-weight: normal;
}
</style>
</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>
<script id="jsbin-javascript">
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));
}
}
});
</script>
<script id="jsbin-source-html" type="text/html"><!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>
</script>
<script id="jsbin-source-css" type="text/css">.active {
font-weight: bold;
}
table {
width: 100%;
}
form {
margin: 1em 0;
}
th {
font-weight: normal;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">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));
}
}
});
</script></body>
</html>
Raw
jsbin.fayug.css
.active {
font-weight: bold;
}
table {
width: 100%;
}
form {
margin: 1em 0;
}
th {
font-weight: normal;
}
Raw
jsbin.fayug.js
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));
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment