Ember.js Component for Bootstrap 3 Pagination & Pager components
Here's a demo jsbin, and these are the original Bootstrap Components: Pagination and Pager.
Install via Bower, bower install ember-twbs-pagination --save
, then include in your page, and start using:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.7.0/ember.js"></script>
<script src="https://rawgithub.com/k3nsei/ember-twbs-pagination/master/dist/ember-twbs-pagination.template.js"></script>
<script src="https://rawgithub.com/k3nsei/ember-twbs-pagination/master/dist/ember-twbs-pagination.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- application.hbs template -->
<script type="text/x-handlebars">
{{ember-twbs-pagination count=15 current=5}}
</script>
<script>
var App = Ember.Application.create();
</script>
</body>
</html>
pager
-- Switches to the pager component, defaults tofalse
hide
-- Hide the component ifcount
equals 1, defaults tofalse
count
-- The number of pages in total, requiredcurrent
-- The current page number, required
countOut
-- The number of page links in the begin and end of whole rangecountIn
-- The number of page links on each side of current pagepaginationNext
-- The text to display for pagination next buttonpaginationPrevious
-- The text to display for pagination previous buttonpaginationSize
-- The size of the element, default is '', available options includelg
andsm
.
pagerNext
-- The text to display for the pager next buttonpagerPrevious
-- The text to display for the pager previous buttonpagerSpread
-- Pager buttons spaced out, defaults to false
By default the first page is 1
, and the last is the value of count
, you can change these by setting firstPage
and lastPage
.