0

I have a component with a component setting (number of records per page). There is also a child paginator that takes the value of the number of entries per page from the parent component. But I'm doing something wrong and the paginator doesn't work. I would greatly appreciate any help in resolving this issue.

Datatable js:

    positionsList;
    visiblePositions;
    status = "";
    statusList;
    @wire(getPositionsList, { limitVal: '$recordSize' })
    positionList({ data, error }) {
        if (data) { 
            this.positionsList = data;
            this.filteredPositions = data;
        }
        if (error) {
            console.error(error);
        } 
    }

    // PAGINATION
    updatePositionsHandler(event) {
        this.visiblePositions = [...event.detail.records]
        console.log(event.detail.records)
    }

Datatable html:

        <div class = "slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
            <lightning-datatable
                    key-field = "Id"
                    data = {visiblePositions}
                    columns = {columns}
                    show-row-number-column = "false"
                    hide-checkbox-column>
            </lightning-datatable>
        </div>
        <br>
        <div class = "slds-float_right slds-size_1-of-1">
            <c-pagination-r-c
                    record-size = {recordSize}
                    records = {positionsList}
                    onupdate = {updatePositionsHandler}>
            </c-pagination-r-c>
        </div>

Paginator js:

@api recordSize;
    currentPage = 1;
    totalRecords;
    totalPage = 0;

    connectedCallback() {
        if(this.totalRecords && this.recordSize) {
            this.recordSize = Number(this.recordSize);
            this.totalPage = Math.ceil(Number(this.totalRecords.length) / Number(this.recordSize));
        };
    };

    @api
    get records() {
        return this.visibleRecords
    };
    set records(data) {
        if(data){ 
            this.totalRecords = data;
            this.connectedCallback();
            this.updateRecords();
        };
    };

    get disablePrevious() { 
        return this.currentPage <= 1;
    };

    get disableNext() { 
        return this.currentPage >= this.totalPage;
    };

    previousHandler() { 
        if(this.currentPage > 1) {
            this.currentPage = this.currentPage - 1;
            this.updateRecords();
        };
    };

    nextHandler() {
        if(this.currentPage < this.totalPage) {
            this.currentPage = this.currentPage + 1;
            this.updateRecords();
        };
    };

    updateRecords() { 
        const start = (this.currentPage - 1) * this.recordSize;
        const end = this.recordSize * this.currentPage;
        this.visibleRecords = this.totalRecords.slice(start, end);
        this.dispatchEvent(new CustomEvent('update', { 
            detail: { 
                records:this.visibleRecords
            }
        }));
    };

enter image description here

1 Answer 1

0

The paginator shouldn't be handling the records from the parent. The @api getters won't be called by the framework in the render life cycle, so the parent won't see the properties change unless the parent checks every render cycle. This is because, unlike Aura components, data-binding is explicitly one way, from parent to child. This design choice makes eliminates an entire class of bugs that developers kept running in to when using Aura.

The pagination component should only be concerned with receiving the the current state of the system (current page, total pages, page size), providing whatever UI the pagination should have, and firing events when the page state should be updated. The parent component should handle those events and update its state accordingly.

1
  • Hello! Thanks for the answer. Then what path should I follow to make the component settings like in the last picture in my post? Thanks again for your help! Feb 11, 2023 at 19:07

You must log in to answer this question.

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