[ANSWERED] How can I create custom ajax pagination against an OData web service?

Our blazing fast Grid component built with pure JavaScript


Post Reply
User avatar
zettersten
Posts: 4
Joined: Sun Jun 30, 2019 7:27 pm

[ANSWERED] How can I create custom ajax pagination against an OData web service?

Post by zettersten »

Hello,

I am using the Bryntum Grid with Angular 9.1.4.

How to I do custom pagination with the common OData URL query param specification, top and skip, where skip indicates the record index of which needs to skip?

Example: ?top=1 // give me a total of 1 record
Example: ?skip=10 // give me records starting from 10

Full example: ?top=10&skip=10 // give me 10 records starting from the 10th record in the database

User avatar
Animal
Core Developer
Core Developer
Posts: 104
Joined: Fri Oct 13, 2017 12:36 pm

Re: [ANGULAR] How can I create custom ajax pagination against an OData web service?

Post by Animal »

If I understand your requirements correctly, you just need to configure the Store with

Code: Select all

pageSize : 10,
pageStartParamName : 'skip', // Note that this is zero based.
pageSizeParamName : 'top'    // So first page will be requested using ?skip=0?top=10

User avatar
zettersten
Posts: 4
Joined: Sun Jun 30, 2019 7:27 pm

Re: [ANGULAR] How can I create custom ajax pagination against an OData web service?

Post by zettersten »

We've already made changes to the parameter names. The change of parameter names is functional.
However, this question pertains to the values that the grid pagination appends to the query params.

Current grid:

Clicking "next" or page "2" on the pagination UI button makes an ajax request with the "pageStartParamName" incremented by 1. This is where our bug is. The pageStartParam name must increment by the pageSize value.

Example:

Page 1 should be "?top=10&skip=0"
Page 2 should be "?top=10&skip=10"
Page 3 should be "?top=10&skip=30"

So the question is, how can we modify how the pageStart value so that it increments ```+=``` by the pageSize value?

Top in ODATA terms is how many records you want to see.
Skip in ODATA terms is how many records you want to offset from zero.

User avatar
Animal
Core Developer
Core Developer
Posts: 104
Joined: Fri Oct 13, 2017 12:36 pm

Re: [ANGULAR] How can I create custom ajax pagination against an OData web service?

Post by Animal »

It does not increment the pageStart parameter. It calculates it:

Code: Select all

    async loadPage(page, params) {
        if (this.allCount) {
            page = Math.min(page, this.lastPage);
        }
        const
            me        = this,
            pageParam = me.pageParamName ? {
                [me.pageParamName] : page
            } : {
                [me.pageStartParamName] : (page - 1) * me.pageSize // <-- this is the code path that you need
            };

        pageParam[me.pageSizeParamName] = me.pageSize;
        return me.internalLoad(Object.assign(pageParam, params), 'Page', (event) => {
            // We go directly to loadPage because paging a tree store is unsupportable.
            // loadPage will trigger the refresh event with { action: 'pageLoad' }
            me.loadData(event.data, 'pageLoad');
        });
    }
    
If you have used 'pageParamName' by mistake, then it will look like what you report.

if you use pageStartParamName, then you can see that it requests page start (page - 1) * me.pageSize

User avatar
zettersten
Posts: 4
Joined: Sun Jun 30, 2019 7:27 pm

Re: [ANGULAR] How can I create custom ajax pagination against an OData web service?

Post by zettersten »

Thank you, 'pageStartParamName' has fixed the issue.

Post Reply