jQuery Pagination Plugin

问题

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.

回答1:

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);
}

来源：https://stackoverflow.com/questions/1523163/jquery-pagination-plugin

标签

javascript

jquery

pagination

jquery-pagination