您的位置：首页 > Web前端 > JavaScript
Emberjs 分页

2015-08-06 19:37 701 查看
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<!--
Created using JS Bin http://jsbin.com 
Copyright (c) 2015 by machty (http://jsbin.com/ucanam/4075/edit)

Released under the MIT license: http://jsbin.mit-license.org -->
<meta name="robots" content="noindex">
<title>JS Bin</title>

<script>
ENV = {
ENABLE_ALL_FEATURES: true
};
</script>

<script src="http://127.0.0.1:8887/BSP/src/bsp/bower_components/jquery/dist/jquery.js"></script>
<script src="http://127.0.0.1:8887/BSP/src/bsp/bower_components/handlebars/handlebars.js"></script>
<script src="http://127.0.0.1:8887/BSP/src/bsp/bower_components/ember/ember.debug.js"></script>
<script src="http://127.0.0.1:8887/BSP/src/bsp/bower_components/ember/ember-template-compiler.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>
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 = this.get('page') + amt;
if (newPage <= this.get('numPages') &&
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>
链接http://emberjs.jsbin.com/ucanam/4075#/?pageSize=16&sortBy=location
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航