# 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)