后端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' # 参数名，默认offset2.代码中使用
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>
