jQuery Pagination Plugin
You don't even need to use a for loop, just use jQuery's slice()
method and a bit of math.
I've hosted a working demo on JS Bin: http://jsbin.com/upuwe (Editable via http://jsbin.com/upuwe/edit)
Here's the modified code:
var pagination_options = {
num_edge_entries: 2,
num_display_entries: 8,
callback: pageselectCallback,
items_per_page:3
}
function pageselectCallback(page_index, jq){
var items_per_page = pagination_options.items_per_page;
var offset = page_index * items_per_page;
var new_content = $('#hiddenresult div.result').slice(offset, offset + items_per_page).clone();
$('#Searchresult').empty().append(new_content);
return false;
}
function initPagination() {
var num_entries = $('#hiddenresult div.result').length;
// Create pagination element
$("#Pagination").pagination(num_entries, pagination_options);
}
Related videos on Youtube
Dodinas
Updated on June 04, 2022Comments
-
Dodinas almost 2 years
Hopefully this is something that will be easy to remedy. I'm having a bit of an issue understanding the jQuery Pagination plugin.
Essentially, all I am trying to do is load a PHP file, and then paginate the results. I'm attempting to go off their example, but I am not yielding the results I'm looking for.
Here's the JavaScript:
function pageselectCallback(page_index, jq){ var new_content = $('#hiddenresult div.result:eq('+page_index+')').clone(); $('#Searchresult').empty().append(new_content); return false; } function initPagination() { var num_entries = $('#hiddenresult div.result').length; // Create pagination element $("#Pagination").pagination(num_entries, { num_edge_entries: 2, num_display_entries: 8, callback: pageselectCallback, items_per_page:3 }); } $(document).ready(function(){ $('#hiddenresult').load('load.php', null, initPagination); });
Here's my HTML (after the PHP has been loaded):
<div id="Pagination" class="pagination"> </div> <br style="clear:both;" /> <div id="Searchresult"> </div> <div id="hiddenresult" style="display:none;"> <div class="result">Result #1</div> <div class="result">Result #2</div> <div class="result">Result #3</div> <div class="result">Result #4</div> <div class="result">Result #5</div> <div class="result">Result #6</div> <div class="result">Result #7</div> </div>
Basically, I am trying to show "3" items per page, but this is not working. I'm assuming that somewhere, I am going to need to create a for loop in my JS, but I'm confused on how to do so. The documentation can be found here.
-
Dodinas over 14 yearsBrian, that was awesome. Thanks very much for pointing out the slice() method!
-
ACP about 14 years@brainpeiris i am struggling with the pagination plugin stackoverflow.com/questions/2505435/… and stackoverflow.com/questions/2523075/…