JQuery Plugin for Ajax-enabled Infinite Page Scroll Paging With Template

jQuery Infinite With Template Plugin for Ajax-enabled endless page scroll using a template. InfiniteScrollWithTemplate.js is a lightweight and easy-to-use jQuery plugin to implement AJAX-enabled endless scrolling in your web application.

The plugin fetches data using AJAX requests and loads more content into your document when you scroll the page or click on a custom trigger element such as the Upload More button.

Must Read: Fixed Table Header To The Top Of Page On Scroll in Pure Javascript

jQuery Infinite With Template Plugin

Post NamejQuery Infinite Template Plugin
Author Namecable8mm
CategoryLoading, Scrolling
Official PageClick Here | Click Here
Official Websitegithub.com
Publish DateApril 5, 2021
Last UpdateJuly 22, 2023
DownloadLink Below
LicenseMIT

Options

  • templateSelector – (required) jsRender template identify
  • dataPath – (required) URL to load more data via AJAX
  • templateHelpers – (optional) Merge with JSON to load
  • key – (optional) data(default)
  • query – (optional) Additional query
  • method – (optional) GET(default), POST, PUT, DELETE
  • loadAtStart – (optional) true(default), false
  • loadSelector – (optional) If it is set, it loads more data every time the selector clicked
  • initialPage – (optional) 1(default)
  • preventCache – (optional) false(default) if true, Add timestamp
  • zeroCallback – (optional) null(default) if function, call zeroCallback when the result is nothing

How to make use of it:

1. Load the wanted jQuery and jsrender JavaScript libraries.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jsrender.min.js"></script>

2. Load the Load InfiniteScrollWithTemplate plugin.

<script src="jquery.infiniteScrollWithTemplate.js"></script>

3. Create a customized template for data rendering.

<script id="my-tmpl" type="text/x-jsrender">
  <p>{{:id}}. {{:title}}</p>
</script>

4. Create a container to which the new content is appended on the web page scroll.

<div id="result"></div>

5. Initialize the plugin and decide on the info supply.

$("#result").infiniteTemplate({
  templateSelector: "#my-tmpl",
  dataPath: "data_sources.ajax",
  query: "word=ajax",
});

6. The information should return the AJAX response as follows.

{
  "data": [
      {
        "id": 1,
        "title": "Title 1"
      },
      {
        "id": 2,
        "title": "Title 2"
      },
      {
        "id": 3,
        "title": "Title 3"
      },
      // more data here
  ]
}

7. Enable a Load More button to load extra content instead of Page Scroll.

$("#result").infiniteTemplate({
  templateSelector: "#my-tmpl",
  dataPath: "data_sources.ajax",
  query: "word=ajax",
  loadSelector: $('#loadmore'),
});

8. More plugin options with default values.

$("#result").infiniteTemplate({

  // POST, PUT, DELETE
  method: "GET",

  // Merge with json to load
  templateHelpers: null,

  // load on page load
  loadAtStart: true,

  // Load more data when the selector gets clicked
  loadSelector: null,

  // initial page
  initialPage: 1,

  // prevent cache
  preventCache: false,

});

9. Execute a callback function when there isn’t any consequence.

$("#result").infiniteTemplate({
  templateSelector: "#my-tmpl",
  dataPath: "data_sources.ajax",
  query: "word=ajax",
  zeroCallback: function () {
    alert("zero alert");
  },
});

See Demo And Download

jquery-infinite-template-plugin

Official Website(cable8mm): Click Here

This superior jQuery/javascript plugin is developed by cable8mm. For extra Advanced Usage, please go to the official website.

Related Posts

Google-Translate-Dropdown-Customize-With-Country-Flag

Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…

Bootstrap-Fileinput

HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….

HStack-and-VStack-in-CSS

CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

Your email address will not be published. Required fields are marked *