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 tofalsehide-- Hide the component ifcountequals 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 includelgandsm.
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent