Entity Lister comes with an AJAX pager, but in many cases your application may require you to supply your own custom AJAX pager. For example, you might have to post some value to your callback function that can only be determined in the javascript. Your callback may need to take into account the values of UI elements elsewhere on the page -- such as filters that appear above your list. In such a case the AJAX pager in Entity Lister won’t suffice. You'll need to write your own. Fortunately it's quite easy to do so.

The idea is to configure your list to use the standard pager (see the code comments above the constructor in the EntityLister class), and then use jQuery’s preventDefault function to intervene and prevent the pager links from reloading the page. The following is a basic example.

// Listen for a click on the pager links and pass the page number to the myPageTurner function.
$('div#my-listing ul.pager a').once().click(function(e) {

  e.preventDefault();

  href = $(this).attr('href');
  arr = href.split('?');
  qs = '?' + arr[1];
 
  // No doubt you have a parseQS() function lying around.
  page = parseQS('page', qs);
  myPageTurner(page);

});

// Turn the page and (optionally) add a little animation.
function myPageTurner(page) {

  if ('undefined' == typeof(page)) {
    page = 0;
  }
 
  // Perhaps getMyVar() determines the value of some UI element on the page.
  var myvar = getMyVar();
 
  $.post('my/callback/path', { myvar: myvar, page: page }, function(data) {
     $('#my-listing').html(data);
     Drupal.attachBehaviors('#my-listing');
  });
 
  // Scroll up.
  offset = $('div#my-container').offset();
  st = offset.top - 100;
  $("html, body").animate({scrollTop: st}, {duration: 400});

}

Your callback might look something like this:

/**
 * AJAX callback.
 *
 * Regenerate the list according to the value of myvar.  You'll need an entry
 * in hook_menu for this page, of course.
 */
function my_callback() {

  $page = isset($_POST['page']) ? check_plain(urldecode($_POST['page'])) : '';

  $arg = isset($_POST['myvar']) ? check_plain($_POST['myvar']) : NULL;

  // In my_custom_list_function() you build your list with EntityLister.
  print drupal_render(my_custom_list_function($page, $arg));

  drupal_exit();

}