后端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

<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>

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分页相关推荐

python django vue_Django+Vue.js构建项目
本文主要讲述如何从0开始,用Django和Vue.js构建一个项目.文章提要:Django与vue.js整合开发原理从头新建一个Django项目新建一个前端页面,使用vue应用在Django中设 ...
vue分页+spring boot +分页插件pagehelper
vue分页+spring boot +分页插件pagehelper https://blog.csdn.net/baidu_38603246/article/details/98854013
django之快速分页
本文介绍djanog两种分页,第一是普通分页,第二是使用haystack全文检索的分页. 1．django自带分页功能,这个功能非常好用. 基本知识点: Django提供了数据分页的类,这些类被定义在 ...
django 与 vue 的完美结合
最近接到一个任务,就是用django后端,前段用vue,做一个普通的简单系统,我就是一搞后端的,听到vue也是比较震惊,之前压根没接触过vue.看了vue的一些文档,还有一些项目,先说一下django ...
项目总结-vue分页组件集成
项目总结-vue分页组件集成后台管理的大部分页面都需要对数据进行分页显示,但是在每个页面都写分页代码太过冗余,而且当分页出现问题时,需要修改每个页面,所以我集成了一个分页组件,在每个页面直接引用这个 ...
vue.js django_如何使用Django和Vue.js对Web应用程序进行原型制作
vue.js django Wouldn't it be cool if you could prototype a custom web application that's responsive ...
Django 搜索结果分页的实现以及点击下一页搜索条件丢失可能的原因分析
1.Django 搜索结果分页的实现在这里我们用django自带的分页模块来实现这个paginator对象中带有如下属性: #per_page:每页显示条目数量 #count:数据总个数 #num ...
Django的列表分页
使用Django的Paginator分页前后端分离导包 from django.core.paginator import Paginator 准备数据测试 data_list = [1, 2, ...
解决Django与Vue的跨域问题
使用django-cors-headers解決Django和vue跨域问题利用Django作为后端,Vue作为前端,进行前后端结合(数据交互)时出现跨域问题,本文介绍后端解决跨域问题的方法,配置后无 ...

django与vue分页

后端django进行自定义分页

前端使用el-pagination 和el-table

django与vue分页相关推荐

最新文章

热门文章