Django Rest framework 之 分页

自定义分页

 

my_pagination.py

 

from rest_framework.pagination import PageNumberPagination


class HomepagePagination(PageNumberPagination):
    page_size = 6
    page_size_query_param = 'page_size'
    # max_page_size = 10
调用分页

 

 

 

<script>
   $(function () {
     var pages;
     function init(page_index) {
       $.ajax({

         type: "get",
         url: "http://127.0.0.1:8000/Homepage/ImageViewSet/",
         data: {'page': page_index},
         cache: false,
         success: function (rsp_data) {
           $('#img').html('');
           $('#my_img').html('');
           //渲染HTML不重复
           // console.info(rsp_data)
           // console.info(rsp_data[0]['name'])
           $.each(rsp_data['results'], function (index, item) {
             // console.info(item)
             $('#img').append('<li>\n' +
                     '                <h4 ><a href="#" style="font-size: 20px;color: #0e90d2">' + item.name + '</a></h4>\n' +
                     '                <a href="#"><img src="' + item.img + '"></a>\n' +
                     '          </li>')
           })
           pages = page_index;
           var page_div = new Array();
           page_div.push('<div  style="text-align: center;font-size: 20px;color: #0e90d2" class="page_div" ><span>当前页数：' + pages + '/' + Math.ceil(rsp_data['count'] / 6) + '</span>\n');

           if (rsp_data['previous'] != null) {
             page_div.push('<span id="up" style="cursor:pointer" class="span_click">上一页</span>')
           }
           if (rsp_data['next'] != null) {
             page_div.push('<span id="down" style="cursor:pointer" class="span_click">下一页</span>')
           }
           page_div.push('<span>跳转：</span>');
           page_div.push('<input type="text" name="page_number">');
           page_div.push('<input type="button" value="GO" id="page_go"></div>');
           var page_div_str = page_div.join('');
           $('#my_img').append(page_div_str)
         }
       });
     }
     init(1);
     $('#my_img').on('click', '.page_div>#up', function () {  //事件委托
       init(pages - 1)
     });
     $('#my_img').on('click', '.page_div>#down', function () {  //事件委托
       init(pages + 1)
     });
     $('#my_img').on('click', '.page_div>#page_go', function () {  //go事件委托
       init($('input[name="page_number"]').val())
     });
   })
</script>