django+element-ui的分页（表格分页）

直接进入正题

1.django的自定义分页配置

2.django 的分页不同方法

3.element-ui的表格分页

---

1.django的自定义分页配置

from rest_framework.pagination import PageNumberPagination

class MyPagination(PageNumberPagination):
    # 自定义分页器
    # 设置一页几条数据
    page_size = 3
    # 设置页码的参数，也就第几页
    page_query_param = 'page'
    # 设置没页数量的参数
    page_size_query_param = 'pagesize'

2.django 的分页不同方法

eg:这样使用ListAPIView

# 查看房屋信息
class ListHouseInfoViews(ListAPIView):
    queryset = HouseInfo.objects.all()
    serializer_class = HouseInfoSer
    pagination_class = MyPagination

注意如果出现报错：UnorderedObjectListWarning: Pagination ma
y yield inconsistent results with an unordered object_list: <class 'real.models.HouseInfo'> QuerySet

 或者使用APIViwe

 主要改变的是在下面这张图

多加了个total_count() 后的代码

、

---

3.element-ui的表格分页

具体解释在代码中 

<template>
<--:data=houselist 也就想当于v-for循环--!>
 <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="user_name"></el-table-column>
        <el-table-column label="楼号" prop="floor"></el-table-column>
        <el-table-column label="单元号" prop="unit"></el-table-column>
        <el-table-column label="房屋号" prop="house"></el-table-column>
        <el-table-column
          label="平米数"
          prop="square"
        ></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:{
        //这是要展示的数据
        get_house(){
            Axios.get('/real/list_house_info')
            .then((resp)=>{
                console.log('2222',resp.data)
                //这是把后端获取的分页数据传到houselist列表里面了
                this.houselist=resp.data.results
            }).catch((err)=>{
                console.log(err)
            })

        },
        // 监听 page size 改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.getUserList();
    },

    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.getUserList();
    },
    },
    mounted(){
        this.get_house()
    }

}
</script>

<style>

</style>

4.文件到这就结束了,去写写吧（举一反三）