rest框架提供自定义分页样式,让你修改再每个页面上显示多少条数据,
pagination API 可以:
分页链接作为响应内容的一部分
分页链接包含在响应头里,比如Content-Range
or Link
内建的样式都使用作为响应内容的链接,使用可访问的API时这种样式更便于访问。
设置分页样式
使用DEFAULT_PAGINATION_CLASS
and PAGE_SIZE
setting keys,分页样式就能被全局设置。
分页样式有好几个,如果使用内建的limit/offset分页,可以像这样:
当在settings中设定好,项目中的数据就会被自动分页。
REST_FRAMEWORK = {
'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.LimitOffsetPagination',
'PAGE_SIZE': 100
}
#当使用offset,url上就会带offset去选定
REST_FRAMEWORK = {
#分页
'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
"PAGE_SIZE":8 #每页显示多少个
}
#一般用这个页码,带page参数
#前端直接用element ui设置页码,web框架传递page参数到后端
API展示
{
"count": 3946,
"next": "http://192.168.10.10:8001/cmdb/Svrconfig/?page=2",
"previous": null,
"results": []
}
#使用rest的pagenumber分页类
#可见,数据全部转移到了'results'里面
#在json数据中,添加了count,next,previous数据。
#前端可以获得数据的总数,可以根据上下页的url请求其他页码数据
vue设置
<el-pagination
small
layout="total,prev, pager, next"
:total="total"
@current-change="handleCurrentChange"/>
#total就是后台的count
#handleCurrentChange函数就是发送分页信息给后端
#碰到个坑,el-pag的page-size默认是10,如果rest中分页数据100,el-pag中就要填page-size。不然页码数会多10倍。