jQuery pagination on mutiple locations on the same page not working

Question

So I have the pagination working for one instance on the page, however; it breaks down if you have another instance on the same page.

Example: One tab is all white papers and paginated, the next tab is filtered white papers by an industry with pagination. Below that filter box is another box for say datasheets with the same tabbed interface and pagination.

The pagination works for only the first instance. Here is the code i am using: JS:

<script type="text/javascript" src="js/jquery.pagination.js"></script>
<script type="text/javascript">
  var pagination_options = {  
                   num_edge_entries: 2,
                   num_display_entries: 8,   
                   callback: pageselectCallback,   
                   items_per_page:5 } 

  function pageselectCallback(page_index, jq) {  
    var items_per_page = pagination_options.items_per_page;  
    var offset = page_index * items_per_page;   
    var new_content = $('.library li.result').slice(offset, offset + items_per_page).clone();  
    $('.Searchresult').empty().append(new_content);
    return false; 
  } 

  function initPagination() {   
    var num_entries = $('.library li.result').length;   
    // Create pagination element  
    $(".paginate").pagination(num_entries, pagination_options); 
  } 

  // Load HTML snippet with AJAX and insert it into the Hiddenresult element 
  // When the HTML has loaded, call initPagination to paginate the elements        
  $(document).ready(function(){      
    initPagination(); 
  });
</script>

Answer 1

This is apparently a known limitation. There is a "critical" feature request in place.

There is also a workaround at this StackOverflow answer.