Problem getting the Pagination Plugin to run
Hey everyone,
i'm new here but I've seen that this problem has been reported by a couple of others and never been answered. I hope someone will be able to help me because even in the
official issues forum there are a couple of threads about this that remain unanswered.
The
jQuery pagination plugin I'm using works like a charm as long as I display only one item per page. Now, since I'm trying to use this for the creation of a multiple choice form with about 80 questions, I'd like to display 10 items per page because 80 clicks to answer all the questions is just inacceptable.
I have looked at the demo file provided with the plugin and
this one and tried to modify my code accordingly, but it just doesn't seem to do the trick.
What happens is that the number of pages is reduced correctly (for 78 items on 10 per page there are 8 pages) but on every page there is only one items displayed, so that only the first 8 questions are shown.
Here is what I've got from the provided demo file:
-
<html>
<head>
<link rel="stylesheet" href="jquery/pagination.css" />
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>
<script type="text/javascript">
function pageselectCallback(page_index, jq){
var new_content = $('#hidden div.question:eq('+page_index+')').clone();
$('#questions').empty().append(new_content);
return false;
}
function initPagination() {
var num_entries = $('#hidden div.question').length;
$("#pagination").pagination(num_entries, {
num_edge_entries: 0,
num_display_entries: 0,
callback: pageselectCallback,
items_per_page: 10,
next_text: 'Next »',
next_show_always: false,
prev_text: '« Previous',
prev_show_always: false
});
}
$(document).ready(function(){
initPagination();
});
</script>
</head>
<body>
<form id="mc_questions" action="results.php" method="post">
<div id="questions">
Pagination Fail! Something went wrong.
</div>
<div id="hidden" style="display: none;">
<div class="question">
<fieldset>
// Here is one question
</fieldset> // This is repeated for all 78 questions
<div>
<input type="submit" value="Submit">
</div>
</div>
</div>
<div id="pagination" class="pagination">
</div>
</form>
</body>
Help is very much appreciated! I'll also post the solution (if found) in the issues thread mentioned above.