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 Name | jQuery Infinite Template Plugin |
Author Name | cable8mm |
Category | Loading, Scrolling |
Official Page | Click Here | Click Here |
Official Website | github.com |
Publish Date | April 5, 2021 |
Last Update | July 22, 2023 |
Download | Link Below |
License | MIT |
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

Official Website(cable8mm): Click Here
This superior jQuery/javascript plugin is developed by cable8mm. For extra Advanced Usage, please go to the official website.