7.分页器2024-03-28

8.必备知识点视图2024-03-28 9.必备知识点模型层ORM2024-03-28 10.必备知识点路由2024-03-28

分页器

1.分页器

1.1 分页推导

首先我们需要明确的时候
- get请求也是可以携带参数的
- 所以我们在朝后端发送查看数据的同时可以携带一个参数告诉后端我们想看第几页的数据
其次我们还需要知道一个点
- queryset对象是支持索引取值和切片操作的
- 但是不支持负数索引情况

def get_page_book(request):
    book_queryset = models.Book.objects.all()
    # 起始页码，步长，终止的页码
    # 从前端传入，book_page/?page_num=1/
    # 获取前端传入的页数，在后段定义好每一页有多少条数据，切片切除指定数据
    # 比如起始页为1
    page = 2
    # 每页5条数据
    page_num = 5
    # 起始条数是1
    # 截取条数是5
    # 终止条数是6
    # 【1:1+5】切片顾头不顾尾

    # 第二页
    # 起始条数是 （2-1）*5+1
    # 截取条数是5
    # 终止条数是（2*5）+1

    # 总页数：数据量/每一页的条数=整数+小数
    # 整数 + 1
    # start_num page end_num page_all

    if page == 1:
        start_num = 1
    else:
        # 第二页
        page_start = page - 1
        start_num = page_start * page_num + 1
    end_num = page * page_num + 1
    query_sert_data = book_queryset[start_num:end_num]
    return render(request, 'book.html', locals())

优化

def get_page_book(request):
    # 需要查看第几页
    page = request.GET.get('page', 1)

    try:
        page = int(page)
    except Exception:
        page = 1

    # 每页展示多少条
    page_num = 10

    # 起始位置
    start_page = (page - 1) * page_num + 1

    # 终止位置
    end_page = page * page_num + 1

    book_obj = models.Book.objects.all()
    queryset = book_obj[start_page:end_page]
    return render(request, 'book.html', locals())

1.2 分页器组件

1.2.1 bootstrap组件

通过点击底部页码进行指定的分页，无法展示全部数据
<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li><a href="?page=1">1</a></li>
        <li><a href="?page=2">2</a></li>
        <li><a href="?page=3">3</a></li>
        <li><a href="?page=4">4</a></li>
        <li><a href="?page=5">5</a></li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

1.3 动态计算页数

1.3.1 内置方法之divmod

内置函数divmod(x, y)
用于执行整数除法和取模运算，并返回一个包含商和余数的元组。
参数x和y是两个数字
- x 是被除数
- y 是除数。
以下是divmod()函数的使用示例：

result = divmod(9, 2)
print(result)  # 输出 (4, 1)

result = divmod(14, 3)
print(result)  # 输出 (4, 2)

# 余数只要不是0就需要在第一个数字上加一

在第一个示例中，我们将9除以2，得到商4和余数1。
在第二个示例中，我们将14除以3，得到商4和余数2。
divmod()函数对于需要同时获得商和余数的情况非常有用。
它可以用于计算进制转换、时间单位转换等问题

def get_page_book(request):
    book_obj = models.Book.objects.all()
    # 需要查看第几页
    page = request.GET.get('page', 1)

    try:
        page = int(page)
    except Exception:
        page = 1

    # 每页展示多少条
    page_num = 10

    # 总数据量
    all_page_count = book_obj.count()
    # 计算一共需要多少页
    page_count, other = divmod(all_page_count, page_num)
    if other:
        page_count += 1
    html_page = ""
    for count in range(1, page_count + 1):
        html_page += f'<li><a href="?page={count}">{count}</a></li>'

    # 起始位置
    start_page = (page - 1) * page_num + 1

    # 终止位置
    end_page = page * page_num + 1

    queryset = book_obj[start_page:end_page]
    return render(request, 'book.html', locals())

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{% static 'jQuery/jquery.min.js' %}"></script>
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
</head>
<body>
{% for book in queryset %}
    <p>{{ book.title }}</p>
{% endfor %}

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        {# 前段转义 - 将后端的html页面进行转义，转为前端页码/也可以后端做这件事  #}
        {{ html_page|safe }}
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>
</body>
</html>

1.4 美化动态分页器

def get_page_book(request):
    book_obj = models.Book.objects.all()
    # 需要查看第几页
    page = request.GET.get('page', 1)

    try:
        page = int(page)
    except Exception:
        page = 1

    # 每页展示多少条
    page_num = 10

    # 总数据量
    all_page_count = book_obj.count()
    # 声明一个左侧的页数
    left_menu_num = page
    if page < 6:
        page = 6
    # 计算一共需要多少页
    page_count, other = divmod(all_page_count, page_num)
    if other:
        page_count += 1
    html_page = ""
    for count in range(page - 5, page + 6):
        if left_menu_num == count:
            # 第一页高亮显示
            html_page += f'<li class="active"><a href="?page={count}" >{count}</a></li>'
        elif count > page_count:
            break
        else:
            html_page += f'<li><a href="?page={count}" >{count}</a></li>'

    # 起始位置
    start_page = (page - 1) * page_num + 1

1.5 封装分页器

1.5.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)

1.5.2 自定义分页器使用示例

后端

def get_book(request):
   book_list = models.Book.objects.all()
   current_page = request.GET.get("page",1)
   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())

前端

<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 }}
        </div>
    </div>
</div>

posted @ 2024-03-28 19:54 Formerly0^0 阅读(62) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 排序、过滤、分页

· 必备知识点模版

· 自定义分页器

· 【19.0】Django框架补充之分页器推导

· 自定义分页器

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）

公告

昵称： Formerly0^0
园龄： 1年3个月
粉丝： 0
关注： 2

+加关注

2025年3月

日

一

二

三

四

五

六

Formerly

分页器

分页器