Pagination with API data

Wappler General How To
#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.

2 Likes
#7

Can the repeat for this specific case be done fully server-side with Wappler? If so, what are the general steps I could take, or docs I can look at for reference? @Teodor

#8

The steps you can take are explained by Patrick in his last post on this topic.
There are no docs about this as it’s something specific for this API.

#9

This didn’t answer my question, I asked specifically if it could be done fully server-side , the example from patrick is client side.

So instead of getting into this API’s specifics, I would like to know how to repeat certain things of an API in general in Wapper. How can I repeat an API call in Wappler, while it’s response status = 206? We have already programmed it succesfully in pure PHP, see example below.

$itemlist = array();
        $page = 0;
        do {
        $rest->setOffset($page * 100);
        $items = $rest->get($url . 'items');
        if ($items === false) {
                echo 'cUrl error: ' . $rest->getCurlError();
        } else {
                $code = $rest->getCode();
                $total = $rest->getTotal();
                //echo 'Response code: ' . $code. "\n";
                //echo 'Total articles: ' . $total . "\n";
                //echo 'Showing articles from ' . $rest->getRangeStart() . ' to ' . $rest->getRangeEnd() . "\n";
                $itemlist = array_merge($itemlist, $items);
        }
        $page += 1;
        } while ($code == '206' AND ((intval($total) > ($page * 100))));
        return $itemlist;
#10

Nevil, it’s not as simple (as it may seem to you) as:

Your API has specific requirements listed in your first post and does not really support paging, so it is not just “repeating data in server action”. There is not “general” way of doing what you require here, it requires customization and custom coding.

#11

Okay too bad it’s not possible with Wapplers UI. Wasted my hours spending on this but that’s life I guess.

Is there a chance this will be possible using Wappler UI in the future, or will you not support it?

#12

You can probably use the condition step and check API status, then use repeater steps inside to return the data you need.
However, without access to the API and test it, it’s hard to list the exact steps.

So you can test checking the API status with condition and use the “then” steps per every status you need to check with certain repeat steps, which you can then use to build your pagination on the page.

Do these guys have any free test data available, where I can check this?

#13

@nevil

Thanks for the access data provided, i’ve accessed your API and was able to create paging for it. Please check your personal messages - i sent the tutorial there, as it is quite too specific for this API.

#14

Hi Teodor, are you able to share the tutorial to me as well, I’m in a similar boat. Thank you!