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