前言
從上一篇就可以了解到其實前端也是可以製作分頁邏輯的,但是會相當複雜,如果後端有做好相關的分頁邏輯 API 給前端那就會不一樣囉
模板
由於這邊要保留原本的分頁邏輯,所以就不動 Products.vue 這邊改用 Coupons.vue 來製作
首先先建立一個檔案叫 Pagination_2.vue,內容模板如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| <template lang="pug"> div nav(aria-label='Page navigation example') ul.pagination.justify-content-center li.page-item(:class="{'disabled': !paginationService.has_pre}") a.page-link(href='#', @click.prevent='getPagesService(paginationService.current_page - 1)', tabindex='-1') Previous li.page-item(v-for='pages in paginationService.total_pages', :key='pages', :class="{'active': paginationService.current_page === pages}") a.page-link(href='#', @click.prevent='getPagesService(pages)') {{ pages }} li.page-item(:class="{'disabled': !paginationService.has_next}") a.page-link(href='#', @click.prevent='getPagesService(paginationService.current_page + 1)') Next </template>
<script> export default { props: { paginationService: { type: Object, }, }, methods: { getPagesService(item) { this.$emit('pageService', item); }, }, }; </script>
|
分頁邏輯
接下來打開 API 頁面來看,可以看到後端都已經將相關的 pagination 都做好了,我們只需要帶入相關的 page
即可
![pagination]()
接下來只需要稍微調整 AJAX 部分並預先定義資料欄位
![AJAX]()
然後就來引入模板,並加入到模板內
1
| pagination1Components(:paginationService='pagination', v-on:pageService="getCoupons")
|
這樣分頁邏輯就製作好了
![分頁邏輯]()
並且也可以做切換頁動作
![切換頁動作]()
結尾
這邊有些人會覺得”那就由後端製作就好了啦,幹嘛讓前端這麼辛苦”,其實這方面要前後端做雙向溝通的,並不是全都由後端製作就好,經過分頁邏輯 1 & 2,你也了解到由製作分頁邏輯是多麻煩的事,雖然後端製作好往前端傳可以省很多事情,但是這部分是雙方一起溝通的唷~(自己寫過後端分頁邏輯,所以滿清楚的)