To use this plugin you need to:
Include jquery.min.js and jquery.paginate.min.js in your document.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.paginate.js"></script>Include a small css to skin the navigation links.
<style type="text/css">
a.disabled {
text-decoration: none;
color: black;
cursor: default;
}
</style>Define an ID on the element you want to paginate, for example: "listitems".
<ul id="listitems">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul>If you have a more than 10 child elements and you want to avoid displaying them before the javascript is executed, you can set the element as hidden by default:
<ul id="listitems" style="display:none">
</ul>Place a div in the place you want to display the navigation links.
<div id="listitems-pagination" style="display:none">
<a id="listitems-previous" href="#" class="disabled">« Previous</a>
<a id="listitems-next" href="#">Next »</a>
</div>Include an initialization script at the bottom of your page like this:
<script type="text/javascript">
$(document).ready(function() {
$('#listitems').paginate({itemsPerPage: 3});
});
</script>To download a demo click here.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent