Pagination React

Fetches data from a Django REST API and shows data given a default Page Number Pagination.

Final Result

Using React Strap and the help of a gist I implemented something of a Google Pagination.

Page Number Pagination JSON Format

A common pattern in pagination is the following, with the total number of records and the link for the next and previous page.

// GET http://localhost:8000/books/?page=3
{
    "count": 12,
    "next": "http://localhost:8000/books/?page=4",
    "previous": "http://localhost:8000/books/?page=2",
    "results": [
        {
            "id_book": 5,
            "title": "Livro 5",
            "author": "Autor 5",
            "release_year": 2005,
            "pages": 105
        },
        {
            "id_book": 6,
            "title": "Livro 6",
            "author": "Autor 6",
            "release_year": 2006,
            "pages": 106
        }
    ]
}

Pagination Component Usage

Even though it is given the previous and the next route, for this component, you just need to give the current page number, last page number and a function that triggers the fetch of a given page.

<PaginationComponent
  current={currentPage}
  last={lastPage}
  gotoPage={handleGotoPage}
/>