Load More Pagination For Long Content - jQuery loadMoreResults

loadMoreResults is a small jQuery plugin for adding a 'Load More' pagination button to your long web content that allows you to dynamically load more items according to your needs. Great for search results page that automatically hides overflowing content and loads more results on demand.

Alternative plugins:

• Infinite Scroll and Load More Plugin With jQuery - Load More
• AJAX Based jQuery Load More / Pagination Plugin - loadMore.js

How to use it:

1. Import jQuery JavaScript library and the jQuery loadMoreResults plugin into the document.

<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
        integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" 
        crossorigin="anonymous">
</script>
<script src="lib/js/loadMoreResults.js"></script>

2. Call the function loadMoreResults() on your long web content and done.

<div class="loadMore">
  <div class="item">List Item Here</div>
  <div class="item">List Item Here</div>
  <div class="item">List Item Here</div>
  <div class="item">List Item Here</div>
  <div class="item">List Item Here</div>
  <div class="item">List Item Here</div>
  <div class="item">List Item Here</div>
  <div class="item">List Item Here</div>
  <div class="item">List Item Here</div>
  <div class="item">List Item Here</div>
  ...
</div>

$(document).ready(function() {
  $('.loadMore').loadMoreResults();
})

3. Style the 'Load More' button as you wish.

.btn-load-more {
  font-size: 14px;
  color: #fff;
  background-color: #00712c;
  border: 0;
  outline: 0;
  padding: 10px 20px;
  margin: 10px;
  cursor: pointer;
}

.btn-load-more:hover { background-color: #00481c; }

4. Specify how many list items to show on init.

$(document).ready(function() {
  $('.loadMore').loadMoreResults({
    displayedItems: 5
  });
})

5. Specify the number of list items to show on each load.

$(document).ready(function() {
  $('.loadMore').loadMoreResults({
    showItems: 5
  });
})

6. Customize the 'Load More' button.

$(document).ready(function() {
  $('.loadMore').loadMoreResults({
    button: {
      'class': 'btn-load-more',
      'text': 'Load More'
    }
  });
})

7. The plugin also allows you to paginate any web content such as html list.

<ul class="loadMore">
  <li class="thumbnail">List Item Here</li>
  <li class="thumbnail">List Item Here</li>
  <li class="thumbnail">List Item Here</li>
  <li class="thumbnail">List Item Here</li>
  <li class="thumbnail">List Item Here</li>
  <li class="thumbnail">List Item Here</li>
  <li class="thumbnail">List Item Here</li>
  <li class="thumbnail">List Item Here</li>
  <li class="thumbnail">List Item Here</li>
  <li class="thumbnail">List Item Here</li>
  ...
</ul>

$('.loadMore').loadMoreResults({
  tag: {
    'name': 'li',
    'class': 'thumbnail'
  }
});

---

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