I've had exactly the same problem. After looking at the documentation it appears the tool is literally just for rendering the pagination tool and we need to take care of how we bind the data ourselves.
first of all you don't need anything inside the selector div - that is where the pagination controls appear:
so leave that empty and have your content sit above it in paragraphs or whatever:
<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 id="selector">
</div>
If you are working with a dynamic data you'd have to generate the id's on the fly
then beneath that just before the body closing tag you need this script:
<script language="javascript">
$(function() {
$('#selector').pagination({
items: 10,
itemsOnPage: 2,
cssStyle: 'compact-theme',
onPageClick: function(pageNumber){test(pageNumber)}
});
});
</script>
notice I've added the onPageClick function (needs renaming) which will pass the page number to my function.
I've got this in my header section:
<style type="text/css">
.selection {
display: none;
}
</style>
<script>
function test(pageNumber)
{
var page="#page-"+pageNumber;
$('.selection').hide()
$(page).show()
}
</script>
</head>
The css originally hides them all by class, then the function closes any that are currently open and opens the one you want by id.
seems to work okay now for me but it was so frustrating :)
here's the whole script:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="pager.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.selection {
display: none;
}
</style>
<script>
function test(pageNumber)
{
var page="#page-"+pageNumber;
$('.selection').hide()
$(page).show()
}
</script>
</head>
<body>
<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 id="selector">
</div>
<script language="javascript">
$(function() {
$('#selector').pagination({
items: 10,
itemsOnPage: 2,
cssStyle: 'compact-theme',
onPageClick: function(pageNumber){test(pageNumber)}
});
});
</script>
</body>
</html>
