Question

I’ve added a jQuery plugin to our websites that currently works as desired, however it breaks when there’s two elements on the page that needs to be paged. I’ve asked the developer of the plugin about this, and he confirms it’s been designed with only one element on the page.

So, I’ve went out to look for another pager plugin, but all of the ones I’ve found can’t handle my specific use case.

My use case is as follows. I have a set of lists that act as columns. On page one, I’d like to see the first two list elements of both columns.

<div>
  <ul class="column-1">
    <li>
    <li>
    <li>
    <li>
  </ul>
  <ul class="column-2">
    <li>
    <li>
    <li>
    <li>
  </ul>
</div>

In the current pager, I’ve implemented this by calculating the amount of columns and dividing the regular start / end by them, so instead of showing records 1 – 4 it shows 1 – 2. Using the :nth-child selector, jquery then shows the first and second li element of either ul. (if you’re looking for code: http://pastebin.com/F7BqQaxh)

This is only possible because the particular jquery plugin I’ve used uses a customizable callback function to execute when the user clicks on a page number. However, this does not work when there’s more than one element on the page, as the callback function doesn’t have awareness of which of the two pager elements is being clicked on – or I’m just missing something fundamental.

So. I guess I’m looking for a simple pager plugin that works with multiple elements on the same page (and should work with an .each() call, so I can apply the pager to all elements with a ‘paged’ class), /and/ that has an overridable method to implement my custom behavior.

I’m not nearly proficient (or patient) enough in Javascript to go and develop it on my own, even though it should be easy enough. I struggle for a whole day on a handful of lines of code, and JS in general just frustrates me to no end. But someone’s gotta do it, :(.## Heading ##

Answer 1

The pajinate plugin will do what you need it to. You can define the div that this should sit and call it without a problem:

<script type="text/javascript">
$(function(){
  $(".pajinate").pajinate({
    item_container_id:'.pajinate-content', 
    nav_panel_id:'.navigation',
    items_per_page:3,
  });
});
</script>
<div>
  <div id="pajinate1" class="pajinate">
    <div class="navigation"></div>
    <ul class="column-1 pajinate-content">
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
      <li>e</li>
      <li>f</li>
      <li>g</li>
      <li>h</li>
      <li>i</li>
      <li>j</li>
      <li>k</li>
      <li>l</li>
    </ul>
  </div>
  <div id="pajinate2" class="pajinate">
    <div class="navigation"></div>
    <ul class="column-2 pajinate-content">
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
      <li>e</li>
      <li>f</li>
      <li>g</li>
      <li>h</li>
      <li>i</li>
      <li>j</li>
      <li>k</li>
      <li>l</li>
    </ul>
  </div>
</div>