问题描述:

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.

网友答案:

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);
}
相关阅读:
Top