Notes
HTML
<template>
<lightning-card title="Tasks" icon-name="standard:task">
<!-- Display Tasks -->
<template for:each={displayedTasks} for:item="task">
<lightning-card key={task.Id} title={task.Subject}>
<p><strong>Status:</strong> {task.Status}</p>
<p><strong>Priority:</strong> {task.Priority}</p>
<p><strong>Due Date:</strong> {task.DueDate}</p>
</lightning-card>
</template>
<!-- Show More Button -->
<template if:true={tasks.length}>
<div class="slds-text-align_center">
<lightning-button
label="Show More"
onclick={handleShowMore}
class="slds-m-top_medium"
variant="brand"
disabled={isLoading}>
</lightning-button>
</div>
</template>
</lightning-card>
</template>
JavaScript
import { LightningElement, track, wire } from 'lwc';
import getTasks from '@salesforce/apex/TaskController.getTasks';
export default class TaskPagination extends LightningElement {
@track tasks = [];
@track displayedTasks = [];
offset = 0;
limit = 5;
isLoading = false;
@wire(getTasks, { offset: '$offset', limit: '$limit' })
wiredTasks({ error, data }) {
if (data) {
this.tasks = data;
this.displayedTasks = [...this.displayedTasks, ...data]; // Append new tasks
this.offset += this.limit; // Update offset for the next fetch
this.isLoading = false;
} else if (error) {
console.error('Error fetching tasks:', error);
}
}
handleShowMore() {
this.isLoading = true; // Show loading spinner
// Re-fetch the tasks with updated offset to load more
this.wiredTasks();
}
}
Meta XML
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="FormattedTimeLWC">
<apiVersion>59.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>
Apex
public with sharing class TaskController {
@AuraEnabled(cacheable=true)
public static List<Task> getTasks(Integer offset, Integer limit) {
return [SELECT Id, Subject, Status, Priority, DueDate FROM Task ORDER BY DueDate LIMIT :limit OFFSET :offset];
}
}
