Axios REST API客户端分页

Question

I have a problem. I have a rest api in flask application. Application is connected to database which stores 10k users. I need to do something like a pagination. I want to get for example: list of 100 users, from 1 to 100, and then get an url to next page with users from 101 to 200 etc. I made a axios request like this:

document.getElementById('showUserInputForm').addEventListener('submit', performGetRequest1);
function performGetRequest1(){
  var start = document.getElementById('starting').value;
  var limit = document.getElementById('limit').value;
  var resultElement = document.getElementById('getResult1');
  resultElement.innerHTML = '';

  axios.get('http://127.0.0.1:5000/users/page', {
    params: {
      start:start,
      limit:limit
    }
  })
    .then(function (response) {
     resultElement.innerHTML = generateSuccessHTMLOutput(response);
    })
    .catch(function (error) {
     resultElement.innerHTML = generateErrorHTMLOutput(error);
    });
}

This code returns me json:

{
    "limit": 100,
    "next": "users/page?start=200&limit=100",
    "previous": "users/page?start=1&limit=99",
    "results": [
        {
{
        "id": 101,
        "password": "hicqjjzxftvq",
        "username": "jclkoxgwgvvw"
    },
    {
         "id": 100,
         "password": "xtitexyetpwg",
         "username": "uwerzuwnxkju"
    },

How i can use these next/previous links to make < and > buttons with it? Or any ideas how to make it?

Answer 1

The backend actually returns the endpoints you can use for the next / previous page.

You can do something like this:

let nextUrl = null;
let previousUrl = null;
url = 'http://127.0.0.1:5000/users/page';

function performGetRequest1(url){
  var start = document.getElementById('starting').value;
  var limit = document.getElementById('limit').value;
  var resultElement = document.getElementById('getResult1');
  resultElement.innerHTML = '';

  axios.get(url)
    .then(function (response) {
     resultElement.innerHTML = generateSuccessHTMLOutput(response);
     nextUrl = 'http://127.0.0.1:5000/' + response.next;
     previousUrl = 'http://127.0.0.1:5000/' + response.previous;
    })
    .catch(function (error) {
     resultElement.innerHTML = generateErrorHTMLOutput(error);
    });
}

If you run this function using either the nextUrl or previousUrl it should return the correct values.