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. Commented Jun 3, 2021 at 3:59

1 Answer 1

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. Commented Jun 3, 2021 at 4:30

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .