VUE 資料分頁

隻要涉及到資料查詢，通常我們都會進行分頁查詢。

假設你的表中有上百萬條記錄，不分頁的話，我們不可能一次性将所有資料全部都載入到前端吧，那前後端都早就崩潰了。

結合 Spring

Spring 和 Vue 都提供了開箱即用的分頁功能。

Spring 主要用來處理後端的分頁查詢，VUE 主要在前端展示頁面和進行下一個頁面的查詢。

有關後端 Spring 如何進行分頁查詢的方法，請參考：Spring Data @Repository 的分頁查詢 中的文章。

如果你配置得當，Spring 會将整個查詢的頁面資訊發送給前端。

比如我們說的這一部分，在這部分中，我們會知道總共查詢的記錄有多少，每一頁的大小，一共有多少頁，目前是第幾頁等分頁最重要的資訊。

VUE

VUE 的前端可以用 Pagination 這個元件 Pagination | Components | BootstrapVue

我們直接在前端調用模闆，将參數設定進來就完成了。

代碼可以精簡到隻有下面幾句話：

<b-pagination
                v-model="pagedData.number"
                :total-rows="pagedData.totalElements"
                :per-page="pagedData.size"
                @click="pageSearch(pagedData.number -1)"
                class="pagination pagination-rounded justify-content-end mb-2"
            ></b-pagination>
           

不用重複做無用的事情了。

第一個參數是目前的頁面是第幾頁。

第二個參數為一共有多少條記錄。

第三個參數為目前分頁的頁面大小。

第四個參數為，如果頁碼被單擊了，我們會觸發一個什麼樣的函數，通常這個函數就是通過 AJAX 的調用到背景再擷取一次資料。

是不是簡單到令人發指。

如果沒有這個模闆的話，我們需要手寫分頁，還要算頁面編碼，真心沒必要。

如果想使用不同的 CSS 的話，在分頁模闆中加入自己的 CSS 就可以了。

我們的分頁效果為

頁面看起來還非常幹淨喔。