Server Side Pagination in Lightning Datatable

Hello everyone, In today's post we will see a code example that helps you to implement server-side pagination in lightning datatable. So let's get started,

Server side pagination in lightning datatable

This example is too simple so beginners can easily understand and implement this in lightning component.

ServerSidePaginationHandler.apxc

 public class ServerSidePaginationHandler {
    
    @AuraEnabled
    public static List<Account> getAccounts(Integer pageSize, Integer pageNumber){
        Integer offset = (pageNumber - 1) * pageSize;
        return [SELECT Id, Name,AccountNumber,Industry,Phone,Type FROM Account LIMIT :pageSize OFFSET :offset];        
    }
 }

PaginationComponent.cmp

 <aura:component controller="ServerSidePaginationHandler" implements="flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="pageNumber" type="Integer" default="1"/>
    <aura:attribute name="pageSize" type="Integer" default="10"/>
    <aura:attribute name="isLastPage" type="Boolean" default="false"/>
    <aura:attribute name="dataSize" type="Integer" default="0"/> 
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <aura:attribute name="isLoading" type="Boolean" default="false" />
    <aura:if isTrue="{!v.isLoading}">
        <lightning:spinner alternativeText="Loading" />
    </aura:if> 
    <lightning:card>
        <div class="slds-p-around_small slds-grid slds-grid_align-spread slds-grid_vertical-align-start">
            <div id="stats">
                <span class="slds-text-heading_small">
                    Page {!v.pageNumber} | Showing records from {! ((v.pageNumber-1)*v.pageSize)+' to '+((v.pageNumber-1)*v.pageSize+v.dataSize)}
                </span>
            </div>
            <div class="inline-container">
                <lightning:button variant="brand" label="Prev" iconName="utility:chevronleft" iconPosition="left" onclick="{!c.handlePrev}" disabled="{! v.pageNumber == 1}"/>
                <lightning:button variant="brand" label="Next" iconName="utility:chevronright" iconPosition="right" onclick="{!c.handleNext}" disabled="{! v.isLastPage}"/>
            </div>
        </div>         
    </lightning:card>
    <lightning:datatable aura:id="accdt" columns="{!v.columns}" data="{!v.data}" keyField="Id"/>
 </aura:component>

PaginationController.js

 ({
    doInit : function(component, event, helper) {        
        helper.getColumn(component);
        helper.getAccounts(component);
    },
    
    handleNext : function(component, event, helper) { 
        var pageNumber = component.get("v.pageNumber");
        component.set("v.pageNumber", pageNumber+1);
        helper.getAccounts(component, helper);
    },
    
    handlePrev : function(component, event, helper) {        
        var pageNumber = component.get("v.pageNumber");
        component.set("v.pageNumber", pageNumber-1);
        helper.getAccounts(component, helper);
    },
 })

PaginationHelper.js

 ({
	getColumn : function(component) {
        component.set('v.columns', [
            {label: 'Name', fieldName: 'Name', type: 'text'},
            {label: 'AccountNumber', fieldName: 'AccountNumber', type: 'text'},
            {label: 'Industry', fieldName: 'Industry', type: 'text'},
            {label: 'Phone', fieldName: 'Phone', type: 'phone'},
            {label: 'Type', fieldName: 'Type', type: 'text'}
        ]);
    },
     
    getAccounts : function(component) {
        component.set("v.isLoading", true);
        var action = component.get("c.getAccounts");
        var pageSize = component.get("v.pageSize").toString();
        var pageNumber = component.get("v.pageNumber").toString();
        action.setParams({
            'pageSize' : pageSize,
            'pageNumber' : pageNumber
        });
        action.setCallback(this,function(response) {
            component.set("v.isLoading", false);
            var state = response.getState();
            if (state === "SUCCESS") {
                var resultData = response.getReturnValue();
                if(resultData.length < component.get("v.pageSize")){
                    component.set("v.isLastPage", true);
                } else{
                    component.set("v.isLastPage", false);
                }
                component.set("v.dataSize", resultData.length);
                component.set("v.data", resultData);
            }
        });
        $A.enqueueAction(action);
    },
 })

Output:

 

Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.