on_page_update.html

<div id="map"></div>

<div id="map-side-bar">
  <div class="map-location" data="{id: 1, point: {lng: -122.2678847, lat: 37.8574888}, category: 'market'}">
    <a href="#" class="map-link">Berkeley Bowl</a>
    <div class="info-box">
      <p>A great place to get all your groceries, especially fresh fruits and vegetables.</p>
    </div>
  </div>
  <div class="map-location" data="{id: 2, point: {lng: -122.4391131, lat: 37.7729943}, category: 'restaurant'}">
    <a href="#" class="map-link">Nopalito</a>
    <div class="info-box">
      <p>The best authentic Mexican restaurant in San Francisco.</p>
    </div>
  </div>
  <div class="map-location" data="{id: 3, point: {lng: -122.4481651, lat: 37.8042096}, category: 'museum'}">
    <a href="#" class="map-link">Exploratorium</a>
    <div class="info-box">
      <p>A hands-on museum of science, art, and human perception in San Francisco.</p>
    </div>
  </div>
  <div class="map-location" data="{id: 4, point: {lng: -122.2940333, lat: 37.8752067}, category: 'food'}">
    <a href="#" class="map-link">ACME Bread</a>
    <div class="info-box">
      <p>Best Bread in the Bay.</p>
    </div>
  </div>
  <div class="map-location" data="{id: 5, point: {lng: -122.2690830, lat: 37.8796000}, category: 'restaurant'}">
    <a href="#" class="map-link">Chez Panisse</a>
    <div class="info-box">
      <p>Alice Waters' restaurant. Birthplace of California cuisine.</p>
    </div>
  </div>
</div>

<div class="footer">
  <p id="pagination"></p>
</div>

on_page_update.js

$(document).ready(function(){
  $(document).bind('init_finished.quickpaginate', function(e){
    $('#map').jMapping({location_selector: '.map-location:visible'});
  });
  $(document).bind('paginate.quickpaginate', function(e, direction, page){
    $('#map').jMapping('update');
  });
  $('#map-side-bar .map-location').quickpaginate({
    perpage: 2, showcounter: false, 
    pager: $("p#pagination")
  });
});