Server side pagination in LWC and AURA salesforce

This post explains server side pagination in LWC. Below is the demo of output :

To change the number of records in a single page, change pagesize (variable in data_table.js) accordingly.

data_table.cmp :

<template>

    <div>

        <lightning-datatable

                key-field="id"

                data={caseData}

                columns={caseColumns}

                onrowaction={handleRowAction}>

        </lightning-datatable>

    </div>  

     <template if:true={showpagination}>

        <lightning-layout-item padding="around-small">

            <div class="slds-align_absolute-center">

                <lightning-button variant="base" 

                                    label="First" 

                                    disabled={disableFirst} 

                                    onclick={handleFirst}

                                    class="slds-m-left_x-small">

                </lightning-button>

                <lightning-button variant="base" 

                                    label="<<" 

                                    disabled={disableFirst} 

                                    onclick={handlePrevious}

                                    class="slds-m-left_x-small slds-m-right_x-small">

                </lightning-button>

                <template for:each={pagelist} for:item="item" for:index="index">

                    <span key={item} data-id={item} class="testcss slds-m-left_xx-small slds-m-right_xx-small slds-p-horizontal_x-small">

                        <b> <a class="testcss"  onclick={processMe} name={item} data-id={item}>{item}</a></b>

                    </span>

                </template>

                <lightning-button variant="base" 

                                label=">>" 

                                disabled={disableNext} 

                                onclick={handleNext}

                                class="slds-m-left_x-small">

                </lightning-button>

                <lightning-button variant="base" 

                                label="Last" 

                                disabled={disableNext} 

                                onclick={handleLast}

                                class="slds-m-left_x-small">

                </lightning-button>

            </div>

        </lightning-layout-item>

    </template>

   

</template>

data_table.js :

import { LightningElement,track,wire } from 'lwc';

import loadCases from '@salesforce/apex/data_table.loadCases';

export default class data_table extends LightningElement {

    @track pagenumber = 1;

    @track recordstart = 0;

    @track recordend = 0;

    @track totalrecords = 0;

    @track pagesize = 3;

    @track totalpages = 1;

    @track showpagination=true;

    @track pagelist;

    @track isLoaded = false;

    @track caseData;

    @track caseColumns = [

    { label: 'Case Number', fieldName: 'CaseNumber', type: 'text'},

    { label: 'Subject', fieldName: 'Subject', type: 'text'},

    { label: 'Priority', fieldName: 'Priority', type: 'text'}

    ];

    @wire(loadCases, {

    pageNumber: "$pagenumber",

    pageSize: "$pagesize"

    })

    getCaseRecord(result){

        if (result.data) {

            this.caseData = result.data.caseList;

            this.totalrecords = result.data.totalRecords;

            this.recordstart = result.data.recordStart;

            this.recordend = result.data.recordEnd;

            this.totalpages = Math.ceil(this.totalrecords / this.pagesize);

            this.generatePageList(this.pagenumber, this.totalpages);

            this.isLoaded = false;

            if(this.totalpages==1){

                this.showpagination=false;

            }else{

            this.showpagination=true; 

            }

        }

    }

    renderedCallback(){

        this.template.querySelectorAll('.testcss').forEach((but) => {

            but.style.backgroundColor = this.pagenumber===parseInt(but.dataset.id,10) ? '#F47920' : 'white';

            but.style.color = this.pagenumber === parseInt(but.dataset.id, 10) ? 'white' : 'black';

        });

    }

    handleFirst(event) {

        this.isLoading = true;

        var pagenumber = 1;

        this.pagenumber = pagenumber;

    }

    processMe(event) {

        var checkpage = this.pagenumber;

        this.pagenumber = parseInt(event.target.name);

        if (this.pagenumber != checkpage) {

        this.isLoading = true;

        }

    }

    get disableFirst() {

        if (this.pagenumber == 1) {

        return true;

        }

        return false;

    }

    get disableNext() {

        if (

        this.pagenumber == this.totalpages ||

        this.pagenumber >= this.totalpages

        ) {

        return true;

        }

        return false;

    }

    handlePrevious(event) {

        this.isLoading = true;

        this.pagenumber--;

    }

    handleNext(event) {

        this.isLoading = true;

        this.pagenumber = this.pagenumber + 1;

    }

    handleLast(event) {

        this.isLoading = true;

        this.pagenumber = this.totalpages;

    }

    generatePageList = (pagenumber, totalpages) => {

        var pagenumber = parseInt(pagenumber);

        var pageList = [];

        var totalpages = this.totalpages;

        this.pagelist = [];

        if (totalpages > 1) {

            if (totalpages < 3) {

                if (pagenumber == 1) {

                    pageList.push(1, 2);

                }

                if (pagenumber == 2) {

                    pageList.push(1, 2);

                }

            } else {

                if (pagenumber + 1 < totalpages && pagenumber - 1 > 0) {

                    pageList.push(pagenumber - 1, pagenumber, pagenumber + 1);

                } else if (pagenumber == 1 && totalpages > 2) {

                    pageList.push(1, 2, 3);

                } else if (pagenumber + 1 == totalpages && pagenumber - 1 > 0) {

                    pageList.push(pagenumber - 1, pagenumber, pagenumber + 1);

                } else if (pagenumber == totalpages && pagenumber - 1 > 0) {

                    pageList.push(pagenumber - 2, pagenumber - 1, pagenumber);

                }

            }

        }

        this.pagelist = pageList;

    };

}

data_table.apx :

public with sharing class data_table {

    @AuraEnabled(cacheable=true)

    Public static caseDataWrapper loadCases(Decimal pageNumber,Decimal pageSize){

        caseDataWrapper res = new caseDataWrapper();

        Integer pSize;

        if(pageSize!=null && pageSize!=0.0){

            pSize = (Integer)pageSize;    

        }else{

            pSize=10;  

        } 

        Integer pNumber = (Integer)pageNumber;

        Integer offset = (pNumber - 1) * pSize;

        list<case> c = new list<case>();

        String query = 'Select id,CaseNumber,Subject, priority from Case LIMIT :pSize OFFSET :offset';

        String countQuery = 'select count() from case';

        c = Database.query(query);

        res.caseList = c;

        res.totalRecords = Database.countQuery(countQuery);

        res.recordStart = offset + 1;

        Integer recordEnd = pSize * pNumber;

        res.recordEnd = res.totalRecords >= recordEnd ? recordEnd : res.totalRecords; 

        return res;

    }

    public class caseDataWrapper {

        @AuraEnabled

        public Integer totalRecords {get;set;}

        @AuraEnabled

        public Integer recordStart {get;set;}

        @AuraEnabled

        public Integer recordEnd {get;set;}

        @AuraEnabled

        public List<case> caseList {get;set;}

    } 

}

Thanks, 
Lovesalesforceyes