Pagination

jquery.paging.js

jQuery(function($){

  /*
    jQuery.paging - simple pagination
  */
  $.fn.paging = function(options) {

    var $base = this,
        base_sel = $base.selector,
        defaultOpts = {
          'item': '.item',
          'items-per-page': 15,
          'paging-prefix': false,
          'paging-postfix': true,
          'previous': 'Previous',
          'next': 'Next',
          'paging-class': 'paging',
          'hash': '#page-',
          'shim': '<div class="clear"></div>'
        },
        settings = $.extend({}, defaultOpts, options);

    $base.each(function(){
      var ctx_selector = settings['paging-class']+'-wrapper',
          $ctx = $(this).wrap("<div class='"+ctx_selector+"'></div>").parent(),
          $items = $ctx.find(settings['item']),
          per_page = settings['items-per-page'],
          pages = Math.ceil($items.length / per_page),
          current_page = 1;

      if (pages < 1) return;

      function selectPage(n, no_hash_update){
        var sel = '.item-on-page-'+n,
            a_sel = '.show-items-on-page-'+n;

        $ctx.find(settings['item']).hide();
        $ctx.find(sel).show();
        $ctx.find('[class^=show-items-on-page]').removeClass('active');
        $ctx.find(a_sel).addClass('active');

        if (settings['hash'] && (! no_hash_update)) {
          window.location.hash = settings['hash']+n;
        }
        $(base_sel).trigger('activate-page', n);

      }

      var $pageNumbers = $("<div>").addClass(settings['paging-class']);

      // loop through the pages
      // 1. add classes to the items
      // 2. build the pagination links
      for (var i = 1; i <= pages; i++) {
        var page_class = '.item-on-page-'+i,
            start = (i-1) * per_page,
            $a = $('<a>').addClass('show-items-on-page-'+i).attr('data-page', i);

        if (settings['hash']) {
          $a.attr('href', settings['hash']+i);
        } else {
          $a.attr('href', '#');
        }

        $items.slice(start, start + per_page).addClass(page_class.substr(1));
        $pageNumbers.append($a.addClass().text(' ' +i+' '))
      };

      if (settings['hash'] && window.location.hash) {
        var hashMatcher = new RegExp(settings['hash']+'(\\d+)'),
            matches = hashMatcher.exec(window.location.hash);

        if (matches && matches.length == 2) {
          current_page = parseInt(matches[1]);
        }
      }

      if (settings['previous']) {
        $pageNumbers.prepend($('<a>').attr('href', '#previous').html(settings['previous']));
      }

      if (settings['next']) {
        $pageNumbers.append($('<a>').attr('href', '#next').html(settings['next']));
      }
      if (settings['shim']) {
        $pageNumbers.append(settings['shim']);
      }

      if (settings['paging-prefix']) {
        $ctx.prepend($pageNumbers.clone());
      }
      if (settings['paging-postfix']) {
        $ctx.append($pageNumbers.clone());
      }

      selectPage(current_page, true);

      // Add event handlers

      $ctx.find('[href="#next"]').click(function(){
        if (current_page < pages) { current_page += 1 }
        if (current_page < 1) { current_page = 1 }
        selectPage(current_page);
        return false;
      });

      $ctx.find('[href="#previous"]').click(function(){
        if (current_page > 1) { current_page -= 1 }
        if (current_page > pages) { current_page = pages }
        selectPage(current_page);
        return false;
      });

      $ctx.find('[class^="show-items-on-page-"]').click(function(){
        current_page = $(this).data('page');
        selectPage(current_page);
        return false;
      })

      $(base_sel).on('goto', function(ev, data){
        current_page = parseInt(data);
        selectPage(current_page);
        return false;
      })
    });

    return $base;
  }
});