<html>
<head>
<link rel=”stylesheet” href=”simplePagination.css” type=”text/css” />
<script src=”tests/lib/jquery.min.js” language=”javascript” ></script>
<script src=”jquery.simplePagination.js” language=”javascript” ></script>
</head>
<body>
<div id=”abc”>
<p class=”selection” id=”page-1″>one</p>
<p class=”selection” id=”page-2″>Two</p>
<p class=”selection” id=”page-3″>Three</p>
<p class=”selection” id=”page-4″>Four</p>
<p class=”selection” id=”page-5″>Five</p>
<p class=”selection” id=”page-6″>Six</p>
<p class=”selection” id=”page-7″>Seven</p>
<p class=”selection” id=”page-8″>Eight</p>
</div>
<script language=”javascript”>
$(function() {
$(‘#abc’).pagination({
items: 20,
itemsOnPage: 3,
cssStyle: ‘light-theme’,
});
});
</script>
</body>
</html>
function pageOne() {
var page_1 = "#page-1";
$('.selection').hide()
$(page_1).show()
}
function test(pageNumber)
{
var page="#page-"+pageNumber;
$('.selection').hide()
$(page).show()
}
$(function() {
$('#abc').pagination({
items: 8,
itemsOnPage: 2,
cssStyle: 'light-theme',
currentPage: 1,
onPageClick: function(pageNumber){test(pageNumber)},
onInit: function(){pageOne()},
});
});