0

I am quite new to LWC, i've created a component that would paginate through a data table. The data table loads correctly from the wire method on component load. problem is when I click Next button, the event gets fired but the getter is not fired, in consequence the datatable is not updated.

What am i doing wrong here?

HTML:

<template>
    <template if:true={loading}>
        <lightning-spinner alternative-text="Loading" size="medium"></lightning-spinner>
    </template>

    <lightning-card title="Object Metadata Info: Fields" icon-name="standard:data_model">

        <!-- OBJECT FIELDS SELECT OPTIONS-->       
        <lightning-layout multiple-rows="true" vertical-align="end"> 
            <!-- LIGHTNING DATA TABLES WITH SEARCH RESULTS-->
            <lightning-layout-item padding="around-small" size="12"> 
                <lightning-datatable key-field="Id" data={objectFieldDescribeList} columns={columns} column-widths-mode="auto" resize-column-disabled hide-checkbox-column=true ></lightning-datatable>
            </lightning-layout-item>

           <!-- Pagination components-->
           <lightning-layout-item padding="around-small" class="slds-align_absolute-center"> 
            <lightning-layout horizontal-align="spread">
                <lightning-layout-item >
                    <lightning-button label="Previous" icon-name="utility:chevronleft" onclick={previousPage} disabled={isFirstPage}></lightning-button>
                </lightning-layout-item>
                <lightning-layout-item class="slds-m-right_small slds-m-left_small"> 
                    Page {currentPage} of {totalPages} 
                </lightning-layout-item>
                <lightning-layout-item >
                    <lightning-button label="Next" icon-name="utility:chevronright" icon-position="right" onclick={nextPage} disabled={isLastPage}></lightning-button>
                </lightning-layout-item>
            </lightning-layout>
        </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

JS:

import { LightningElement, api, wire, track } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import getFieldsDescribeList from '@salesforce/apex/ObjectMetadataViewerController.getFieldsDescribeInfo';

export default class objectMetadataViewer extends LightningElement {
        @api recordId;
        title;
        message;
        variant;
    
        none                    = '--None--';
        fieldsDescribeResult    = [];
    
        currentPage;
        recordsPerPage;
        totalPages;
        
        @track currPageList         = [];
        currentPage                 = 1;
        recordsPerPage              = 10;
        totalPages                  = 1;
    
    
    
        @wire(getFieldsDescribeList, {pId: '$recordId'})
        wiredFieldDescribe({ error, data }) {
            if (data) {
                //update the datatable
                this.fieldsDescribeResult   = data;
                // get total pages in result list
                this.totalPages = Math.ceil(this.fieldsDescribeResult.length / this.recordsPerPage);
            } else if (error) {
                this.fieldsDescribeResult = undefined;
                //show error toast notification
                this.title = 'Search Results';
                this.message = 'Error fetching field info for record: ' + error.body.message;
                this.variant = 'error';
                this.showNotification();
            }
        }
    
        //Define the datatable columns
        columns = [
            { label: 'Label',     fieldName: 'label',     type:'text' },
            { label: 'API Name',  fieldName: 'name',      type:'text' },
            { label: 'Type',      fieldName: 'fieldtype', type:'text' },
            { label: 'Is Custom', fieldName: 'isCustom',  type:'text'} ,
        ]
    
        get objectFieldDescribeList (){
            //return undefined if data array is empty
            if(Array.isArray(this.fieldsDescribeResult) && !this.fieldsDescribeResult.length) {
                return undefined;
            }
            //setup variables
            let firstItem       = (this.currentPage-1) * this.recordsPerPage;
            let lastItem        = (this.currentPage * this.recordsPerPage)-1;
            
            for(let j=firstItem; j<=lastItem; j++ ){
                this.currPageList[j]= this.fieldsDescribeResult[j];
            }
            
            console.log(' objectFieldDescribeList: ' + this.currPageList);
            return this.currPageList;
        }
        
        //Shows a toast msg with custom values
        showNotification() {
            const evt = new ShowToastEvent({
                title:   this.title,
                message: this.message,
                variant: this.variant,
            });
            this.dispatchEvent(evt);
        }
    
        previousPage (event) {
            if(!this.isFirstPage()){
                this.currentPage === this.currentPage - 1;
                this.currPageList = this.objectFieldDescribeList;
            }
        }
    
        nextPage(event){
            if(!this.isLastPage()){
                this.currentPage = this.currentPage + 1;
                this.currPageList = this.objectFieldDescribeList;
            }
        }
    
        get isFirstPage(){
            console.log('currentPage isFirstPage: ' + this.currentPage === 1);
            return this.currentPage === 1;
        }
    
        get isLastPage(){
            console.log('currentPage isLastPage: ' + ((this.currentPage) >= this.totalPages));
            return ((this.currentPage) >= this.totalPages);
        }
    }
1
  • In the getter objectFieldDescribeList, either initialize this.currPageList = [] or this.currPageList = [... this.currPageList], since it could be because the array reference is not changing. Jun 3 at 3:59
0

You have some problems with your code, including:

            this.currentPage === this.currentPage - 1;

This should be:

this.currentPage -= 1;

Or:

this.currentPage--;

        for(let j=firstItem; j<=lastItem; j++ ){
            this.currPageList[j]= this.fieldsDescribeResult[j];
        }

Is wrong, it should be:

this.currPageList = this.fieldsDescribeResult.slice(firstItem, lastItem);

        if(!this.isFirstPage()){

And:

        if(!this.isLastPage()){

Should be:

if(!this.isFirstPage) {

And:

if(!this.isLastPage) {

Notice the lack of (). Since they are getters, you're effectively accessing a property, not calling a method.

You may have other problems, too, but this is a decent start.

1
  • Thank you, I have implemented your changes and now i see these were very novice errors on my end. Unfortunately, these still do not allow the refresh of the datatable. Jun 3 at 4:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.