這里提供兩種分頁方法

一種是手寫分頁,不常用,但是明白一下分頁的邏輯實現

第二種是用heyui提供的組件.很多功能都給封裝好了,用起來也比較美觀.

---

---

手寫分頁

后端接口

class GoodList(APIView):def get(self, request):# 當前頁page = int(request.GET.get('page', 1))# 一頁有多少條商品size = int(request.GET.get('size', 1))# 定義從哪里開始切片data_start = (page - 1) * size# 定義切到哪data_end = page * size#查詢數據goodslist=Goods.objects.all()[data_start:data_end]#查詢總數量count=Goods.objects.count()# 序列化操作goods_ser=GoodsSer(goodslist,many=True)# 返回響應return Response({'total':count,'data':goods_ser.data})

前端頁面

<template> ......<!--自主分頁--><div><!-- v-show 判斷當前頁數是否有需要顯示上或下一頁 --><Button v-show="lastpage" @click="getdata(lastpage)">上一頁</Button><Button v-for="index in all" @click="getdata(index)">{{index}}</Button><Button v-show="nextpage" @click="getdata(nextpage)">下一頁</Button></div> </template><script>export default {data() {return {//自主分頁total: 0,//商品總數curpage: 1,//當前頁all: 0,//總頁數lastpage: 0,//上一頁nextpage: 0,//下一頁size: 2,//每頁顯示多少//商品列表goodlist: '',mounted() {//調用自主分請求this.getdata(1);},methods: {//自主分頁接口getdata: function (mypage) {this.axios.get('http://localhost:8000/goodlist/', {params: {page: mypage,size: this.size}}).then(res => {this.goodlist = res.data.data;console.log(res.data.data);//判斷上一頁if (mypage == 1) {this.lastpage = 0;} else {this.lastpage = mypage - 1}// 計算總頁數 Math.ceil 向上取整this.all = Math.ceil(res.data.total / this.size);//判斷下一頁if (mypage == this.all) {this.nextpage = 0} else {this.nextpage = mypage + 1}});},}}</script><style></style>

heyui 組件庫

后端代碼不用做修改.可以直接復用.heyui前端就相對來說簡單了許多.

<template>......<!--heyui分頁--><br></div><div><!-- layout可以自定義控制顯示那些組件和順序.--><Pagination v-model="pagination" @change="change" layout="sizes,pager,jumper" align="center"></Pagination></template><script>export default {data() {return {//分頁器變量pagination: {page: 1,size: 3,total: 5},//商品列表goodlist: '',},mounted() {//請求商品接口返回數據this.axios.get('http://localhost:8000/goodlist/', {params: {page: 1, size: 3}}).then(res => {this.goodlist = res.data.data;console.log(res.data.data)});},methods: {//分頁器事件change: function () {//二次請求this.axios.get('http://localhost:8000/goodlist/', {params: {page: this.pagination.page,size: this.pagination.size}}).then(res => {this.goodlist = res.data.data;console.log(res.data.data)});},}}</script><style></style>

兩種分頁的效果.上邊的是heyui組件,下邊是手寫分頁器.

HEY UI 分頁文檔:https://www.heyui.top/component/data/view/page

Element 組件文檔:https://element.eleme.cn/#/zh-CN/component/installation

功能多多 各自挖掘吧.

總結

以上是生活随笔為你收集整理的Django+vue 分页展示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。