jQuery Pagination Plugin

Question

Hello good people,

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.

Many thanks for your help on figuring this out!

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

Answer 2

Will this work in IE6...?? Because i am trying it right now and when the plugin is applied over the data only the pagination numbers are visible.. The data stays hidden always..!!! Works perfectly fine in FireFox and Chrome..!!!

Answer 3

Hello ! If you want using pagination plugin, pls try it here: http://kenphan.info/view/2010/01/Cach-su-dung-jQuery-jPager-plugin.html That is a simple page used AJAX and JSON. The name is jPager. That jPager is easy install & simply.

Answer 4

thanks a lot ^^~ . Wonderful

Answer 5

You are a life saver! thnx so much!!

Answer 6

Has anyone been able to add the pagination navigation to the bottom of the results also? I know that if I make the "Pagination" id a class I can replicate it at the bottom. However, I'd love to be able to make the two pagination navs replicate each other. Meaning, if the user clicks on the next button and the link status change for the top nav, they do the same for the bottom as well.

Thanks