elementui+django实现分页效果

elementui+django实现分页效果

前端：

template：

<el-pagination
      background		
      @current-change='currentChange'
      layout="prev, pager, next"
     :page-size='size'
     :current-page.sync='cur_page'
     :total="count">
</el-pagination>

script:

methods: {
	currentChange(currentPage){
	this.page=currentPage;
	this.getContestLoad();
			},
	getContestLoad(){
	//get请求获取参数
	this.getRequest('/api/ojs/contestloads/' + this.$route.params.uid +'/?page='+this.page+'&size='+this.size,this.val).then(resp => {
	if (resp) {//设置表内容
	this.tableData = resp.data;
	this.count=resp.count;	//设置分页总数
	}
	})
	},
},
data() {
	return {
	cur_page:1,			//光标指向页
	count:0,			//数据总数
	page:1,				//当前数据页
	size:15,			//每页数据数量
	}
},

后端：

#基于APIView自定义的分页
class MyPage(APIView):
    def get(self, request):
        # 获取所有数据集
        books = models.Book.objects.all()

        # 对数据集进行分页，可以是自己配置了参数的分页器
        paginator = CommonPageNumberPagination()

        # 获取分页过后的数据
        qs = paginator.paginate_queryset(books, request, self)

        # 对数据进行序列化，多条数据需要添加 many=True
        res = serializer.BookSerializer(qs, many=True)

        # 返回的方式一，只返回分页后的结果
        # return Response(res.data)

        # 返回方式二，自己配置返回的其他信息，例如上一页下一页
        # return Response({
        #     'count': books.count(),
        #     'next': paginator.get_next_link(),
        #     'previous': paginator.get_previous_link(),
        #     'results': res.data
        # })

        # 返回方式三，使用方法自动返回类似于方式二的内容
        return paginator.get_paginated_response(res.data)