Lazyload Datalist Template

Introduction

Lazy Load Datalist Template enables incremental loading for Joget datalists, displaying rows in configurable batches via scroll or a "Load More" button. It supports customizable batch sizes, optional button-triggered loading, and configurable row heights. This plugin helps developers and administrators improve performance and user experience with large datasets by reducing initial page load times, minimizing server load, and enabling seamless data browsing without pagination.

Plugin Information

Plugin Available in the Bundle:

1. Lazyload Datalist Template

This plugin bundle is compatible with Joget DX 8.

Getting Started

Steps

1. You can obtain the jar file from the Joget Marketplace.

2. Upload the plugin jar file in Joget by going to Settings > Manage Plugins.

See the Plugin in Action

To view the plugin in action and understand how it works:

1. Navigate to your app in Joget and open the Datalist Builder.
2. Select your datalist or create a new one.
3. In the Template dropdown, choose "List - Lazy Loading" from the available templates.
4. Configure the template properties, including the number of rows per batch and whether to show the Load More button, or show the message when there is no more data.
   
5. Save and preview your datalist to see rows load incrementally as you scroll or click the Load More button.

Expected Outcome

When this template is applied to a datalist, it renders an initial set of rows based on the configured batch size. As users interact with the datalist:

• A table displaying datalist rows in the configured row height style.
• An optional Load More button that appears when enabled in template settings.
• A loading indicator that displays while additional rows are being fetched from the server.
• Incremental row loading that continues automatically as users scroll down the page or click the Load More button.
• A customizable message is displayed when all available data has been loaded.
• If all rows load successfully and pagination completes, the template shows the configured completion message.

Download plugin

You can download the Lazyload Datalist Template Plugin from the Joget Marketplace or GitHub repository.

Download sample app