Django框架之分页器使用

Xiao20000101

已于 2024-04-24 20:12:22 修改

阅读量804

点赞数 19

分类专栏： Django 文章标签： django 状态模式 python

于 2024-04-08 10:58:58 首次发布

本文链接：https://blog.csdn.net/Xiao20000101/article/details/137500085

版权

Django 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、问题描述

针对上一篇章的批量插入数据，我们会发现一个很严重的问题，将所有数据都放到前端页面展示的时候一千多条数据放在了一页，这样太不方便，就像书本一样，不可能把所有内容都放在一页吧。

所以我们可以也想书本一样，尝试做分页处理

二、分页推导

首先需要明确的是，get请求/post请求都可以携带参数，所以在朝后端发送数据时，可以携带一个参数告诉后端我们想看第几页的数据。

还有一点就是，Queryset对象支持索引和切片操作，但是不支持负数索引情况。

1、第一页分析

book_list = models.Book.objects.all()
# 获取用户想访问的页码  如果没有 默认展示第一页
current_page = request.GET.get("page",1)  

# 由于后端接受到的前端数据是字符串类型所以我们这里做类型转换处理加异常捕获
try:  
  current_page = int(current_page)
except Exception as e:
  current_page = 1
  
# 还需要定义页面到底展示几条数据
per_page_num = 10  # 一页展示10条数据
 
# 需要对总数据进行切片操作 需要确定切片起始位置和终止位置
start_page = ? 
end_page = ?

然后需要研究起止页的位置，也就是current_page、per_page_num、start_page、end_page四个参数之间的数据关系

2、整体分析

current_page、per_page_num、start_page、end_page四个参数之间的数据关系

per_page_num = 10
current_page                start_page                  end_page
    1                           0                           10
    2                           10                          20
    3                           20                          30  
    4                           30                          40
 
per_page_num = 5
current_page                start_page                  end_page
    1                           0                           5
    2                           5                           10
    3                           10                          15  
    4                           15                          20
    
start_page = (current_page - 1) * per_page_num
end_page =  current_page* per_page_num

可以很明显的看出规律

start_page = (current_page - 1) * per_page_num
end_page =  current_page* per_page_num

3、手动切片

（1）后端

def ab_many(request):

    # 分页
    book_list = models.Book.objects.all()

    # 想访问哪一页
    current_page = request.GET.get('page', 1)  # 如果获取不到当前页码，就展示第一页
    # 数据类型转换
    try:
        current_page = int(current_page)
    except Exception:
        current_page = 1
    # 每页展示多少条
    per_page_num = 10
    # 起始位置
    start_page = (current_page - 1) * per_page_num
    # 终止位置
    end_page = current_page * per_page_num
    # 计算总共需要多少页
    all_count = book_list.count()

    # 增加高光点（当前页展示）
    page_count, more = divmod(all_count, per_page_num)
    if more:
        page_count += 1

    page_html = ''
    xxx = current_page
    if current_page < 6:
        current_page = 6
    for i in range(current_page-5,current_page+6):  # 页码我们需要从1开始
        if xxx == i:
            page_html += f'<li class="active"><a href="?page={i}">{i}</a></li>'
        else:
            page_html += f'<li><a href="?page={i}">{i}</a></li>'

    book_queryset = book_list[start_page:end_page]
    return render(request, 'ab_many.html', locals())

（2）前端

{% for book_obj in book_queryset %}
    <p>{{ book_obj.title }}</p>
{% endfor %}

（3）路由访问

通过在 url 后面携带参数，完成分页操作
http://127.0.0.1:8000/ab_many/?page=3

三、自定义分页器的使用

当我们需要使用到非django内置的第三方功能或者组件代码的时候，我们一般情况下会创建一个名为utils文件夹，在该文件内对模块进行功能性划分。
utils可以在每个应用下创建。

我们到了后期封装代码的时候，不再局限于函数，还是尽量朝面向对象去封装我们自定义的分页器

1、自定义分页器封装代码（模版）

class Pagination(object):
    def __init__(self, current_page, all_count, per_page_num=2, pager_count=11):
        """
        封装分页相关数据
        :param current_page: 当前页
        :param all_count:    数据库中的数据总条数
        :param per_page_num: 每页显示的数据条数
        :param pager_count:  最多显示的页码个数
        """
        try:
            current_page = int(current_page)
        except Exception as e:
            current_page = 1
 
        if current_page < 1:
            current_page = 1
 
        self.current_page = current_page
 
        self.all_count = all_count
        self.per_page_num = per_page_num
 
        # 总页码
        all_pager, tmp = divmod(all_count, per_page_num)
        if tmp:
            all_pager += 1
        self.all_pager = all_pager
 
        self.pager_count = pager_count
        self.pager_count_half = int((pager_count - 1) / 2)
 
    @property
    def start(self):
        return (self.current_page - 1) * self.per_page_num
 
    @property
    def end(self):
        return self.current_page * self.per_page_num
 
    def page_html(self):
        # 如果总页码 < 11个：
        if self.all_pager <= self.pager_count:
            pager_start = 1
            pager_end = self.all_pager + 1
        # 总页码  > 11
        else:
            # 当前页如果<=页面上最多显示11/2个页码
            if self.current_page <= self.pager_count_half:
                pager_start = 1
                pager_end = self.pager_count + 1
 
            # 当前页大于5
            else:
                # 页码翻到最后
                if (self.current_page + self.pager_count_half) > self.all_pager:
                    pager_end = self.all_pager + 1
                    pager_start = self.all_pager - self.pager_count + 1
                else:
                    pager_start = self.current_page - self.pager_count_half
                    pager_end = self.current_page + self.pager_count_half + 1
 
        page_html_list = []
        # 添加前面的nav和ul标签
        page_html_list.append('''
                    <nav aria-label='Page navigation>'
                    <ul class='pagination'>
                ''')
        first_page = '<li><a href="?page=%s">首页</a></li>' % (1)
        page_html_list.append(first_page)
 
        if self.current_page <= 1:
            prev_page = '<li class="disabled"><a href="#">上一页</a></li>'
        else:
            prev_page = '<li><a href="?page=%s">上一页</a></li>' % (self.current_page - 1,)
 
        page_html_list.append(prev_page)
 
        for i in range(pager_start, pager_end):
            if i == self.current_page:
                temp = '<li class="active"><a href="?page=%s">%s</a></li>' % (i, i,)
            else:
                temp = '<li><a href="?page=%s">%s</a></li>' % (i, i,)
            page_html_list.append(temp)
 
        if self.current_page >= self.all_pager:
            next_page = '<li class="disabled"><a href="#">下一页</a></li>'
        else:
            next_page = '<li><a href="?page=%s">下一页</a></li>' % (self.current_page + 1,)
        page_html_list.append(next_page)
 
        last_page = '<li><a href="?page=%s">尾页</a></li>' % (self.all_pager,)
        page_html_list.append(last_page)
        # 尾部添加标签
        page_html_list.append('''
                                           </nav>
                                           </ul>
                                       ''')
        return ''.join(page_html_list)

后端通过get方式实现分页功能，每次切换页的时候，会刷新页面。

后端通过post方式实现分页功能，每次切换页的时候，不会刷新页面，只会重新渲染下一页的内容。

2、get方法实现分页器功能（我比较常用）

（1）后端

from utils.mypage import Pagination
 def get_book(request):
   book_list = models.Book.objects.all()
   current_page = request.GET.get("page",1)
   try:
      current_page = int(current_page)
   except Exception:
      current_page = 1 
    # 前端传来的数据为字符串，所以后端异常捕获，为字符串的话转为int类型
 
   all_count = book_list.count()
 
   page_obj = Pagination(current_page=current_page,all_count=all_count,per_page_num=10)
   page_queryset = book_list[page_obj.start:page_obj.end]
   return render(request,'booklist.html',locals())

（2）前端

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            {% for book in page_queryset %}
            <p>{{ book.title }}</p>
            {% endfor %}
 
            {{ page_obj.page_html|safe }} 
        # ## 只需要这一句就可以，上面的的for循环是要分页的数据
        </div>
    </div>
</div>

3、post方法实现分页器功能

（1）前端

 评论区分页开始
<body>
    <div class="pull-right">
        {{ page_obj.page_html|safe }}
    </div>
</body>
 
 
<script>
 
 
// 评论列表分页绑定点击事件
        $('.btn_page').click(function () {
            // 获取当前点了第几页
            var current_page = $(this).attr('current_page')
            var article_id = {{ article_obj.pk }}
                $('.active').removeClass('active');
            $(this).parent().addClass('active');
 
            $.ajax({
                url: '/comment_page/',
                type: 'post',
                data: {
                    current_page: current_page,
                    'article_id': article_id,
                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                },
                success: function (args) {
                    let html = '';
                    if (args.code == 200) {  //重新渲染一遍楼层页面，          
                        $.each(args.data, function (index, obj) {    
                            html +=`<li class="list-group-item">
                        <span style="margin-right: 10px"># ${obj.forloop}楼</span>
                        <span style="margin-right: 10px">${obj.comment_time}</span>
                        <span style="margin-right: 10px">${obj.username}</span>
                        <span style="margin-right: 10px" class="pull-right"><a href="javascript:;"
                                                                               comment_username="${obj.username}"
                                                                               comment_id='${obj.pk}'
                                                                               class="reply">回复</a></span>
                        <div class="content" style="margin-left: 14px">
                           ${obj.content}
                        </div>
                    </li>`
                        });
                        $('.list-group').html(html);
                    }
                }
            })
        })
</script>

（2）后端

如果整个项目中多个地方需要用到分页功能，可以将上面的固定模板加入到utils文件夹，utils文件夹内可以放一些通用的辅助函数，工具类和可重用的代码片段，这些片段不属于特定的模型，视图或者其他部分，可以被多个部分共享和复用。

# 评论区分页
    from utils.mypage1 import Pagination
    page_obj = Pagination(current_page=request.GET.get('page', 1),             
    all_count=comment_list.count(), per_page_num=5)
    comment_list = comment_list[page_obj.start:page_obj.end]
 
 
 
def comment_page(request):
    # 根据当前第几页查询当前页的评论列表数据
    if request.method == 'POST':
        back_dic = {'code': 200, 'msg': '查询成功'}
        # 接收参数(点的第几页)
        article_id = request.POST.get('article_id')
        current_page = request.POST.get('current_page')  # 2
        try:
            current_page = int(current_page)
        except Exception:
            current_page = 1
 
        # 每页显示的条数
        per_page_num = 5
 
        start_page = (current_page - 1) * per_page_num
        end_page = current_page * per_page_num
 
        # 查询评论列表数据
        comment_list = models.Comment.objects.filter(article_id=article_id).all()[start_page:end_page]  # queryset对象
        comment_list_obj = []  # [{},{},{}]
        i = current_page * per_page_num - (per_page_num - 1) # 翻页后顺序依次相加
        for comment in comment_list:
            comment_list_obj.append({
                'forloop': i,
                'pk': comment.pk,
                'comment_time': comment.comment_time,
                'username': comment.user.username,
                'content': comment.content
            })
            i += 1
        back_dic['data'] = comment_list_obj
        return JsonResponse(back_dic)