Two jquery pagination plugin in the same page doesn't seem to work

Question

I use jquery pagination plugin for paging... If there is one pagination plugin there is no problem for me... But if there is two one seems to work but the other doesn\'t see

Answer 1

Probably this is not the answer you were hoping for, but there's a feature request for the jQuery Pagination plugin that suggest that having two pagers on the same page is not supported by the current implementation:

http://plugins.jquery.com/node/11825

Answer 2

Since this doesn't seem to be officially supported, here is a workaround (working demo).

Step 1 Create your HTML markup as follows:

<div class="pagination" id="Pagination">
  <!-- the container for your first pagination area -->
</div>

<div id="results">
  <!-- the container where you show your results -->
</div>

<div class="pagination" id="Pagination2">
  <!-- the container for your second pagination area -->
</div>

Step 2 The idea:
The idea is now to use the pagination plugin as usual with the first pagination div. But additionally, we want to copy all contents of the first pagination div to the second pagination div every time a page change occurs.

Step 3 Tweak the pageSelect-callback:
Add the following lines at the end of your callback function:

var paginationClone = $("#Pagination > *").clone(true);
$("#Pagination2").empty();
paginationClone.appendTo("#Pagination2");

It is very important to include the boolean parameter (withDataAndEvents) with the .clone call, otherwise the copy of your pagination won't have any click events.

Now, every time you click on a pagination element (regardless if it is the original or the copy), the page will change and the pagination elements will update accordingly.