Pagination with API data


#1

I want to show a bootstrap table based on API data.

  1. API Action: GET from https://app.mrpeasy.com/rest/v1/manufacturing-orders
  2. Show table

This all works fine, except that the API only shows the first 100 results. I want pagination to show the other results too. The results are provided in the header data from MRPEasy, like so:

Content-Range →items 0-99/1476

I assume something should be done with the paging generator and query manager, but I’m not sure how to start. Any docs or pointers?

From the MRPeasy docs:

The maximum length of list is 100 objects at a time. If there are more than 100 objects in the database, response code will be 206 and response will include HTTP header Content-Range with indexes of the first and the last objects and total number of objects. Please note that the index of the last object is equal to the total number of objects minus 1.

In order to receive next objects from the list, your request should include HTTP header Range with index of the first object that should be returned.
To receive less than 100 objects, include HTTP header Range with indexes of the first and the last objects.

For example:

Content-Range: items 0-99/250 - response contains first 100 objects of 250.

Content-Range: items 200-249/250 - response contains last 50 objects of 250.

Range: 200 - request 100 objects starting from 201.
Range: 10-14 - request 5 objects starting from 11.


#2

Does the API supports paging?

We already support reading most common paging data, so it should be pretty easy to do pagination.


#3

I’m afraid they do not support paging. The only thing about paging they mention is listed in my first post.

So how can I do pagination in this case?


#4

The Bootstrap 4 Paging Generator can not handle this kind of paging. You can however build your own paging using a repeater. To get the number of pages you need to get that from the header. It will not be easy.

I can’t test it, but with your information it should become something like:

<dmx-value id="offset" dmx-bind:value="0"></dmx-value>

<dmx-api-action id="api1" url="https://app.mrpeasy.com/rest/v1/manufacturing-orders" dmx-header:range="offset.value"></dmx-api-action>

<nav>
  <ul class="pagination pagination-sm">
    <li class="page-item" dmx-repeat:repeat1="(api1.headers['Content-Range'].split('/')[1].toNumber() / 100).ceil()"><a class="page-link" href="#" dmx-on:click="page.setValue($index * 100);api1.load()">{{$index + 1}}</a></li>
  </ul>
</nav>

#5

I’m not going to risk screwing up the project by fiddeling in the code, I’m not experienced enough to do that. Will this be something that will be supported by wappler in the future?


#6

I am afraid we cannot add visual support for any custom API out there, that people are using.
If you take 100 different APIs probably all of them will have different options for paging, headers, etc.