JavaScript Load-more button

JavaScript
Petr Kostelanský | 4 December 2017
In this article I would like to share with you my new simple module that handle pagination by one button.

This module makes easy to create pagination by one Load-more button.

How init this module in js:

var mySettings = {} // your settings
var urlParams = {} //parameters for ajax call

var myLoadMore = new LoadMore(mySettings, urlParams);

$(document).ready(function () {
     myLoadMore.init();
});

Load-more works with default settings but you can override it.

Default settings:

    var defaultSettings = {
        loadButton: '#button-load-more',
        appendItemsArea: '#area-load-more',
        links: '#area-load-more a',
        url: '',
        totalItemsCount: 0,
        loadedItemsCount: 0,
        paggingParam: "page",
        debug: 0
    };
  • loadButton - id that is on load-more button, when you click on this button request is send on the server for new data (images, articles whatever)
  • appendItemsArea - id of area (div) where are append new data (images, articles whatever)
  • links - selector for all links on items that where loaded by Load-more. Click event is bind on this links because it is needed to pushState into window.history before you leave actual page. It is important when you use back button in browser to load all items where you was before.
  • ulr - ulr for async call on the server to load new items and append them into appendItemsArea
  • totalItemsCount - information from server how much items is possible to load
  • loadedItemsCount - number of items we load from server during page load
  • paggingParam - name of parameter that is used for paging
  • debug - write debug info into console = 1

Parameters:

Parameters according to which was page loaded and will be used for ajax call when someone click on Load-more button

How use it:

Create div element in a page:

<div id="area-load-more">
</div>

Add "load more" button on the page:

<button id="button-load-more" type="button" style="width: 140px; display: none;">
    <i class="fa fa-spinner fa-pulse" style="display:none"></i>
    <span>Load more</span>
</button>

This button will be set to visible by Load-more module and fa spinner will be also toggle before and after loading new items from server.

Download

Download this js-load-more module on github

Check how it works on this page.

 

Loading ads...