分頁(Pagination)概念-1

source: unsplash

最近在練習的作業有用到有關分頁的技巧，這邊先記錄一下，在撰寫分頁的過程中，我是怎麼規劃分頁功能的邏輯。

總共有三個部分

Step1. 編排資料來源

Step2. 依據資料來源的編排，來做頁碼的配置

Step3. 點擊各分頁的頁碼會跳出相對應的內容 與 點擊上一頁和下一頁的功能

接下來，就比較詳細的紀錄一下個步驟的規劃內容

Step1. 編排資料來源

假設今天資料庫data裏面總共有7筆資料，我希望每一個頁面只呈現兩筆資料，這樣子的話，資料庫就會被分類成下面這個樣子，並把兩筆資料合併起來，並存在page_str的陣列裡面

資料庫資料分配

Step2. 依據資料來源的編排，來做頁碼的配置

依據在Step1將資料庫整理後，分別存到page_str陣列裡面。 由此可以判斷這個網頁總共會有4頁，因為page_str有四個元素。

經過Step1 和 Step2 處理後，網頁上的頁面應該可以做到以下的這個效果。

分頁的初步效果