How to implement pagination for which uses Service Data Provider(SDP).

Summary

How to implement pagination inside the and using Service Data Provider(SDP) instead of Array Data Provider(ADP).

Content

Used <oj-paging-control> within <oj-table> tag.

The <oj-table> renders results from Service Data Provider.

But as per mentioned in the JET Cookbook, the <oj-table> as well as the <oj-paging-control>  uses the Array Data Provider.

In our application we use the following table with SDP:

<oj-table id="oj-table-lov" class="oj-flex-item" data="[[$page.variables.listOfValuesBOListSDP]]" >    
    <oj-paging-control id="paging" data="[[$page.variables.listOfValuesBOListSDP]]" page-size="10" slot="bottom">
    </oj-paging-control>
  </oj-table>

The usage of the above OJET code within the application gives the following error in the console: