---
# System prepended metadata

title: Pagination

---

# Pagination
## I. Layout
> Required: Alway show 4 button arrows and 3 item (both desktop and mobile)
> 
![](https://i.imgur.com/8Y3mpxO.png)

## II. Do
### 1. Setup
PHP: get
- Total pages -> set `data-total-page=$total_page`
### 2. Idea
All cases base on maximun pages:
- Total pages <=3:
  - hide double arrow item
  - return
- Total pages > 3:
  - Delete all dots
  - Get attrbute `href` to any item number has link to get value = `https://mijnsitebeheren.com/goodnfood/blog/page/...`
  - Check current page

    - if `current === 1` or `current === 2` => disable double arrow previous
![](https://i.imgur.com/1xBKyKS.png)
![](https://i.imgur.com/L4j3fuC.png)

    - if `current === total pages` or `current === total pages - 1` => disable double arrow next
![](https://i.imgur.com/9ndut50.png)
![](https://i.imgur.com/3tJe3NE.png)

    - if `current === 1` keep 3 first items, remove all remaining items; reset href + text to 3rd item
![](https://i.imgur.com/1xBKyKS.png)

    - if `current === 2` => keep 3 first items, remove all remaining items
![](https://i.imgur.com/L4j3fuC.png)

    - if `current === total page - 1` => keep 3 last items, remove all remaining items
![](https://i.imgur.com/9ndut50.png)

    - if `current === total page` => keep 3 last items, remove all remaining items; reset href + text to (total page - 2) item
![](https://i.imgur.com/3tJe3NE.png)
    
    - if `current === [3, total page-2]` =>keep items: current item, previous item; remove all remaining items;
![](https://i.imgur.com/WPXiVxi.png)

