Oracle-JET : How do I dynamically adding content to oj-list-view using oj-paging-control

Question

I want to fetch data based on the page number. i.e. I check if page no. is 1, make an API call which returns 1-100 output rows and those are displayed in the list-view. Whenever page number is changed, a function is called (I will make a new API call there to load next 100 output rows into the ArrayDataProvider). Is there a way to capture the value of page number in and also call a function every time it changes?

HTML

<oj-paging-control id="paging" data='[[pagingDataProvider]]' page-size='100'></oj-paging-control>
<oj-list-view id="listview" data="[[pagingDataProvider]]">
     <template slot="itemTemplate" data-oj-as="item">
     <oj-list-item-layout id="listitem">
     <oj-bind-text value="[[item.data.VALUE]]"></oj-bind-text>
     </oj-list-item-layout>
     </template>
</oj-list-view>

JS

var a = makeAjaxCall(url, Object.assign({},reqParams, {data: {this.data},dataType: "json"}));
            a.then((response)=> {
                 var data = response.split("\n")
                 while(data[i]!="")
                 {
                 this.listOutput.push({
                    "VALUE":data[i]                     
                 });
                 pagingDataProvider(new ArrayDataProvider(this.listOutput, {keyAttributes: 'VALUE'})); 
                 }

Answer 1

This use of paging control is deprecated, the only use supported is the dots version which can be used with filmstrip. High water mark scrolling is the supported way to load more data in JET.