Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 

WARNING: Project Extremely Out of Date!

This project was originally written around the Ember 1.0 release candidates with Bootstrap 2.2 and probably will not work with the latest version of Ember.

#Ember Pageable for Bootstrap

####Pagination Mixin for Ember.js Using Bootstrap's Pagination

Ember Bootstrap Pageable is a mixin for ArrayControllers to build a paginated view that can be controlled with Bootstrap's pagination component. It's designed to be used in conjuction with the {{each}} helper and will adjust the content property to only show the current page's items. Implementation is simple:

The Mixin

// Use when creating the controller for the paginated content
App.PeopleController = Ember.Controller.extend({
	people: Ember.ArrayController.createWithMixins(VG.Mixins.Pageable)
});

If you to change the default items per page, just adjust the perPage option:

// Declare the controller and instantiate the pageable ArrayController with 20 items per page
App.PeopleController = Ember.Controller.extend({
	people: Ember.ArrayController.createWithMixins(VG.Mixins.Pageable, {
		perPage: 20
	})
});

The ArrayController

The only difference in this implementation of ArrayController is you will now assign the array of items to the data property. Easily done inside of setupControllers():

// Declare the route
App.PeopleRoute = Ember.Route.extend({
	setupControllers: function(controller) {
		// Get the data to use and inject it into the controller
		$.getJSON('data.json', function(data){
			var items = [];

			// Loop through each item and create a Person out of it
			data.forEach(function(item){
				items.pushObject(App.PersonModel.create(item));
			});

			// Set the items to the `data` property for use in the controller
			controller.set('people.data', items);
		});
	}
});

The Pagination View

Then inside the template, you'll use the {{each}} helper like normal, and use this view for the pagination:

{{view VG.Views.Pagination controllerBinding="people" classNames="span12"}}

If you want to change the number of pages listed in the pagination at a time, extend VG.Views.Pagination and pass in the numberOfPages option:

// Declare the pagination view and set the number of pages to show to 15
App.PaginationView = VG.Views.Pagination.extend({
	numberOfPages: 15
});

Example

Here's the implementation from the demo:

<!-- Inside of a handlebars template -->
<div class="row">
	<div class="span12">
		<div class="row">
			<div class="span12">
				<table class="table table-striped table-bordered table-condensed">
					<thead>
						<tr>
							<th>First Name</th>
							<th>Last Name</th>
							<th>Company Name</th>
							<th>Location</th>
							<th>E-mail</th>
						</tr>
					</thead>
					<tbody>
						{{#each people}}
							<tr>
								<td>{{FirstName}}</td>
								<td>{{LastName}}</td>
								<td>{{Company}}</td>
								<td>{{location}}</td>
								<td>{{Email}}</td>
							</tr>
						{{/each}}
					</tbody>
				</table>
			</div>
		</div>
		<div class="row">
			{{view App.PaginationView controllerBinding="people" classNames="span12"}}
		</div>
	</div>
</div>

Requirements

  • Emberjs with router-v2 (currently only master has this) and dependencies
  • Bootstrap 2.2.0 and dependencies

Coming soon

  • Sorting API Documentation
  • Pushstate and Navigation (maybe)

I'm still on the fence about adding navigation because in most usage cases for pagination, the data isn't idempotent and may not be the same on next visit making bookmarking a bad experience. If there is demand for it, I'll consider it.

About

Twitter Bootstrap Pagination for ArrayControllers

Resources

Releases

No releases published

Packages

No packages published