1 from rest_framework.pagination import PageNumberPagination 2 from .serializers import BookSerilizer 3 from .models import BookInfo 4 from rest_framework.views import APIView 5 # Create your views here. 6 class MyPageNumberPagination(PageNumberPagination): 7 page_size=2 #默认两个 8 max_page_size = 5 #一页显示最大5个 9 page_query_param = 'page' #页码 10 11 class Pager1View(APIView): 12 def get(self,request): 13 #获取所有数据 14 roles = BookInfo.objects.all() 15 #创建分页对象 16 pg = MyPageNumberPagination() 17 #在数据库中获取分页数据 18 pager_roles = pg.paginate_queryset(queryset=roles, request=request,view=self) 19 #对分页数据进行序列化 20 ser = BookSerilizer(instance=pager_roles, many=True) 21 return pg.get_paginated_response(ser.data) #返回上一页或者下一页
html页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="/static/js/jquery-3.2.1.js"></script> </head> <body> <h2>书籍管理</h2> <div id="context"> <ul id="items"></ul> <button id="prev">上一页</button> <button id="next">下一页</button> </div> </body> <script type="text/javascript"> //页面初始化加载 $(function () { every_page() }); //页码循环函数 function every_page(page_url='/books/?page=1') { $.get( page_url, function (data) { $('#items').empty(); $('#next').attr('next_page',data['next']); $('#prev').attr('prev_page',data['previous']); $.each(data['results'],function (index,val) { $('#items').prepend('<li>书名：'+val.bname+'，作者：'+val.author+'</li>') }) } ) } //下一页点击事件 $('#next').on('click',function () { var next_page = $(this).attr('next_page'); //取不到就是 undefined if (next_page != undefined){ every_page(next_page) } }); //上一页点击事件 $('#prev').on('click',function () { var prev_page = $(this).attr('prev_page'); //取不到就是 undefined if (prev_page != undefined){ every_page(prev_page) } }) </script> </html>