<html>
<head>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/jquery.bootpag.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<title>bootpag - dynamic pagination jQuery plugin</title>
<style type="text/css">
p{
text-align: center;
}
</style>
</head>
<body>
<a href="https://github.com/botmonster/jquery-bootpag"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>
<h1>Hello, this is bootpag - dynamic pagination jQuery plugin</h1>
<p>For more information see <a href="http://botmonster.com/jquery-bootpag/">projet homepage</a></p>
<!-- Demo time! -->
<h2 id="example-simple">Simple example</h2>
<ul>
<li>Init with 5 pages.</li>
<li>Change total to 10 on page select.</li>
</ul>
<div class="bs-docs-example">
<p class="well demo content1">
Dynamic content here.
</p>
<p class="demo demo1"></p>
</div>
<h3>Source</h3>
<pre class="prettyprint linenums languague-js">$('.demo1').bootpag({
total: 5
}).on("page", function(event, num){
$(".content").html("Page " + num); // or some ajax content loading...
// ... after content load -> change total to 10
$(this).bootpag({total: 10, maxVisible: 10});
});</pre>
<h2 id="example-advanced">Advanced example</h2>
<ul>
<li>Init with 23 pages.</li>
<li>Visible only 10 at once.</li>
<li>Start with page 3.</li>
</ul>
<div class="bs-docs-example">
<p class="well demo content2">
Dynamic content here.
</p>
<p class="demo demo2"></p>
</div>
<h3>Source</h3>
<pre class="prettyprint linenums languague-js">$('.demo2').bootpag({
total: 23,
page: 3,
maxVisible: 10
}).on('page', function(event, num){
$(".content2").html("Page " + num); // or some ajax content loading...
});</pre>
<h2 id="example-pro">Pro example</h2>
<ul>
<li>Init with 9 pages.</li>
<li>Visible only 6 at once.</li>
<li>Page number 5 active.</li>
<li>Prev/Next do no leap.</li>
<li>Use template for hrefs: <code>"#pro-page-{{number}}"</code>.</li>
<li>Custom next text</li>
<li>No prev text</li>
</ul>
<div class="bs-docs-example">
<p class="well demo content3">
Dynamic content here.
</p>
<p class="demo demo3"></p>
</div>
<h3>Source</h3>
<pre class="prettyprint linenums languague-js">$('.demo3').bootpag({
total: 9,
page: 5,
maxVisible: 6,
href: "#pro-page-{{number}}",
leaps: false,
next: 'next',
prev: null
}).on('page', function(event, num){
$(".content3").html("Page " + num); // or some ajax content loading...
});</pre>
<h2 id="example-full">Full example</h2>
<ul>
<li>Use all options available</li>
<li>Init two bootpags for same content</li>
</ul>
<div class="bs-docs-example">
<p class="demo demo4_top"></p>
<p class="well demo content4">
Dynamic content here.
</p>
<p class="demo demo4_bottom"></p>
</div>
<h3>Source</h3>
<pre class="prettyprint linenums languague-js">$('.demo4_top,.demo4_bottom').bootpag({
total: 50,
page: 2,
maxVisible: 5,
leaps: true,
firstLastUse: true,
first: '<span aria-hidden="true">←</span>',
last: '<span aria-hidden="true">→</span>',
wrapClass: 'pagination',
activeClass: 'active',
disabledClass: 'disabled',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first'
}).on("page", function(event, num){
$(".content4").html("Page " + num); // or some ajax content loading...
}); </pre>
<script type="text/javascript">
a = $('.demo1').bootpag({
total: 5
}).on("page", function(event, num){
$(".content1").html("Page " + num); // or some ajax content loading...
// ... after content load -> change total to 10
$(this).bootpag({total: 10, maxVisible: 10});
});
$('.demo2').bootpag({
total: 23,
page: 3,
maxVisible: 10
}).on('page', function(event, num){
$(".content2").html("Page " + num); // or some ajax content loading...
});
$('.demo3').bootpag({
total: 9,
page: 5,
maxVisible: 6,
href: "#pro-page-{{number}}",
leaps: false,
next: 'next',
prev: null
}).on('page', function(event, num){
$(".content3").html("Page " + num); // or some ajax content loading...
});
$('.demo4_top,.demo4_bottom').bootpag({
total: 50,
page: 2,
maxVisible: 5,
leaps: true,
firstLastUse: true,
first: '<span aria-hidden="true">←</span>',
last: '<span aria-hidden="true">→</span>',
wrapClass: 'pagination',
activeClass: 'active',
disabledClass: 'disabled',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first'
}).on("page", function(event, num){
$(".content4").html("Page " + num); // or some ajax content loading...
}).find('.pagination');
</script>
<footer>(c) 2015 botmonster.com</footer>
</body>