rest_framwork中ApiView实现分页

 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>