后端django進行自定義分頁

1.編寫自定義配置文件

from rest_framework.pagination import LimitOffsetPaginationclass LimitPagination(LimitOffsetPagination):max_limit = 2 # 最大limit限制，默認Nonedefault_limit = 2 # 默認限制，和page_size作用一樣limit_query_param = 'limit' # 參數名，默認limitoffset_query_param = 'offset' # 參數名，默認offset

2.代碼中使用

class GetRepairInfoAll(ListCreateAPIView):serializer_class = RepairInfoSerqueryset = Repair.objects.all()pagination_class = LimitPagination

返回格式為

前端使用el-pagination 和el-table

<template>

?<el-table :data="houselist" border stripe>

? ? ? ? <el-table-column type="index"></el-table-column>

? ? ? ? <el-table-column label="id" prop="id"></el-table-column>

? ? ? ? <el-table-column label="保修人員" prop="repair_people"></el-table-column>

? ? ? ? <el-table-column label="房屋id" prop="house"></el-table-column>

? ? ? ? <el-table-column label="狀態" prop="status"></el-table-column>

? ? ? ? <el-table-column label="報修描述" prop="desc"></el-table-column>

? ? ? ? <el-table-column label="報修人電話" prop="phone"></el-table-column>

? ? ? ? </el-table><br /><br />

? ? ? <el-pagination

? ? ? ? :current-page="queryInfo.pagenum"

? ? ? ? :page-sizes="[1, 2, 3, 4,5]"

? ? ? ? :page-size="queryInfo.pagesize"

? ? ? ? layout="total, sizes, prev, pager, next, jumper"

? ? ? ? :total="total"

? ? ? ? @size-change="handleSizeChange"

? ? ? ? @current-change="handleCurrentChange"

? ? ? >

? ? ? </el-pagination

? ? ? ><br /><br />

</template>

<script>

import Axios from 'axios'

export default {

? ? data(){

? ? ? ? return{

? ? ? ? queryInfo: {

? ? ? ? query: "", // 查詢參數

? ? ? ? pagenum: 1, // 當前頁碼

? ? ? ? page: 1,

? ? ? ? pagesize: 2, // 每頁顯示條數

? ? ? ? },

? ? ? ? total: 0,

? ? ? ? // :data=houselist

? ? ? ? houselist:[],

? ? ? ? }

? ? },

? ? methods:{

? ? ? ? getList(){

? ? ? ? this.listLoading = true;

? ? ? ? fetchList(this.listQuery).then(response => {

? ? ? ? ? this.listLoading = false;

? ? ? ? ? this.list = response.data.list;

? ? ? ? ? this.total = response.data.total;

? ? ? ? });

? ? ? },

? ? ? ? //這是要展示的數據

? ? ? ? get_house(){

? ? ? ? ? ? Axios.get("repari/get_repair_all/")

? ? ? ? ? ? .then((resp)=>{

? ? ? ? ? ? ? ? console.log('2222',resp.data)

? ? ? ? ? ? ? ? //這是把后端獲取的分頁數據傳到houselist列表里面了

? ? ? ? ? ? ? ? this.houselist=resp.data.results

? ? ? ? ? ? ? ? this.total = resp.data.count

? ? ? ? ? ? }).catch((err)=>{

? ? ? ? ? ? ? ? console.log(err)

? ? ? ? ? ? })

? ? ? ? },

? ? ? ? // 監聽 page size 改變的事件

? ? handleSizeChange(newSize) {

? ? ? this.queryInfo.pagesize = newSize;

? ? },

? ? // 監聽 頁碼值 改變的事件

? ? handleCurrentChange(newPage) {

? ? ? this.queryInfo.pagenum = newPage;

? ? },

? ? },

? ? mounted(){

? ? ? ? this.get_house()

? ? }

}

</script>

總結

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

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