AJAX Based jQuery Load More / Pagination Plugin - loadMore.js

loadMore.js is a tiny, easy-to-use jQuery plugin for generating a loading more button which allows to load more web content from external data sources via AJAX requests. Great for your infinite scrolling webpage where the visitors are able to load more posts without navigating away from the current webpage.

How to use it:

1. Add the loadMore.js JavaScript file into your webpage after you've added jQuery library.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="loadmore.js"></script>

2. Create a 'load more' button on the webpage.

<a class="button" href="">More...</a>

3. Call the function on the target container and specify the external data source you want to fetch.

$('.list').loadmore('/path/to/more.html');

4. Apply the following options to the plugin and override the default values as per your need.

$('.list').loadmore('more.html',{

  // custom id
  id : null,

  // class name for the load more link
  className : 'more',

  // rather than creating a new button, use an existing one matching this selector / element
  useExistingButton: false,

  // text to show in the load more link
  text : 'More',

  // text to show while loading
  loadingText : 'Loading',

  // current page in the list
  page : 0,

  // how many elements should be expected on a new page
  rowsPerPage : false,

  // maximum numbers of pages to fetch at once
  maxPageCount : false,

  // the query parameter used to specify which page to fetc
  pageParam : 'page',

  // when more than one page is fetched at once this is the query parameter used to specify the page to start from
  pageStartParam : 'start',

  // custo filter result
  filterResult: '*',

  // executed once a new page has been loaded, return false if the pager should be removed
  complete : false,

  // whether to use the History API in supported browsers or not
  useHistoryAPI : true,

  // whether to use offsets rather than page numbers
  useOffset : false,

  // an offset to add to all offsets. 
  // Will be parsed from any pageParam or pageStartParam query params on an existing button.
  baseOffset: 0,

  // or complex URL cases, define a method that will be sent url and params and returns either an object with a url and params key or a url string if no params should be used anymore.
  processUrl: false,

  // if one uses both processUrl and useExistingButton then one will likely have to have a custom method to extract the modfied baseOffset from the existing button. 
  // Receives Location object, itemCount and options.
  interpretUrl: function (loc, itemCount, options) {
    var result;

    loc.search.substr(1).split('&').some(function (pair) {
      pair = pair.split('=');
      if (pair[0] === options.pageParam) {
        result = parseInt(pair[1]) + options.baseOffset;
        return true;
      } else if (pair[0] === options.pageStartParam) {
        result = parseInt(pair[1]) + options.baseOffset - itemCount;
        return true;
      }
    });

    return result;
  }
});

5. Fire an event when the last page has been fetched.

$(".list").on("loadmore:last", function() {
  // ...
});

---

This awesome jQuery plugin is developed by voxpelli. For more Advanced Usages, please check the demo page or visit the official website.