【一】引入#

针对上一小节批量插入的数据
- 我们在前端展示的时候发现一个很严重的问题
- 一页展示了所有的数据，数据量太大，查看不方便
针对数据量大但又需要全部展示给用户观看的情况下
- 我们统一做法都是做分页处理

【二】分页推导#

【1】理论#

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

【2】分析#

后端分析

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

4
# 由于后端接受到的前端数据是字符串类型所以我们这里做类型转换处理加异常捕获
5
try:
6
  current_page = int(current_page)
7
except Exception as e:
8
  current_page = 1
9

10
# 还需要定义页面到底展示几条数据
11
per_page_num = 10  # 一页展示10条数据
12

13
# 需要对总数据进行切片操作 需要确定切片起始位置和终止位置
14
start_page = ?
15
end_page = ?

下面需要研究current_page、per_page_num、start_page、end_page四个参数之间的数据关系

1
per_page_num = 10
2
current_page                start_page                  end_page
3
    1                           0                           10
4
    2                           10                          20
5
    3                           20                          30
6
    4                           30                          40
7

8
per_page_num = 5
9
current_page                start_page                  end_page
10
    1                           0                           5
11
    2                           5                           10
12
    3                           10                          15
13
    4                           15                          20

可以很明显的看出规律

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

【三】手动切片#

【1】后端#

1
def ab_many(request):
2

3
    # 分页操作 推导
4

5
    # （1） 支持切片models.Book.objects.all()[1:20] --- 展示前20条数据
6
    # （2） 分页操作
7
    # 想访问的页数
8
    current_page = request.GET.get('page', 1)  # 如果获取不到当前页码就展示第一页
9
    # 异常捕获
10
    try:
11
        current_page = int(current_page)
12
    except Exception:
13
        current_page = 1
14
    # 每页展示多少条
15
    per_page_num = 10
16
    # 起始位置
17
    start_page = (current_page - 1) * per_page_num
18
    # 终止位置
19
    end_page = current_page * per_page_num
20
    # 切片
21
    book_queryset = models.Book.objects.all()[start_page:end_page]
22
    '''
23
    start_page = (current_page-1) * per_page_num
24
    end_page = current_page * per_page_num
25
    '''
26
    return render(request, 'ab_many.html', locals())

【2】前端#

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

【3】路由访问#

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

但是这种当时方式，没有对前端页面进行优化，仅仅只是后端部分完成了分页

【四】分页器组件#

【1】参考bootstrap#

参考bootstrap官方文档，拷贝分页器代码进行优化

1
<nav aria-label="Page navigation">
2
  <ul class="pagination">
3
    <li>
4
      <a href="#" aria-label="Previous">
5
        <span aria-hidden="true">&laquo;</span>
6
      </a>
7
    </li>
8
    <li><a href="#">1</a></li>
9
    <li><a href="#">2</a></li>
10
    <li><a href="#">3</a></li>
11
    <li><a href="#">4</a></li>
12
    <li><a href="#">5</a></li>
13
    <li>
14
      <a href="#" aria-label="Next">
15
        <span aria-hidden="true">&raquo;</span>
16
      </a>
17
    </li>
18
  </ul>
19
</nav>

【2】优化后代码#

1
{% for book_obj in book_queryset %}
2
    <p>{{ book_obj.title }}</p>
3
{% endfor %}
4

5
<nav aria-label="Page navigation">
6
    <ul class="pagination">
7
        <li>
8
            <a href="#" aria-label="Previous">
9
                <span aria-hidden="true">&laquo;</span>
10
            </a>
11
        </li>
12
        <li><a href="?page=1">1</a></li>
13
        <li><a href="?page=2">2</a></li>
14
        <li><a href="?page=3">3</a></li>
15
        <li><a href="?page=4">4</a></li>
16
        <li><a href="?page=5">5</a></li>
17
        <li>
18
            <a href="#" aria-label="Next">
19
                <span aria-hidden="true">&raquo;</span>
20
            </a>
21
        </li>
22
    </ul>
23
</nav>

效果
- 通过点击底部的页码也已进行指定的分页

缺点：数据页数只能指定，无法展示全部数据

【五】动态计算页数#

【1】引入#

当我问你下面几个问题的时候，你的内心肯定是鄙视的，不信的话那就请听题
问题1<总数据有100条>，每页展示10条，总共需要几页？
- 答案<10条>
问题2<总数据有101条>，每页展示10条，总共需要几页?
- 答案<11条>
问题3<如何通过代码算出到底需要多少条>？
- 答案<去你妹的>，不会！！！

【2】计算题#

总数据 100 条
- 每一页 10 条
  - 需要 10 页
总数据 99 条
- 每一页 10 条
  - 需要 10 页
总数据 101 条
- 每一页 10 条
  - 需要 11 页

如何动态的计算出需要多少页？

【3】内置方法之divmod#

（1）介绍#

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

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

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

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

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

（2）实战#

1
def ab_many(request):
2

3
    # 分页操作 推导
4

5
    # （1） 支持切片models.Book.objects.all()[1:20] --- 展示前20条数据
6
    # （2） 分页操作
7
    # 书籍对象
8
    book_query = models.Book.objects.all()
9
    # 想访问的页数
10
    current_page = request.GET.get('page', 1)  # 如果获取不到当前页码就展示第一页
11
    # 异常捕获
12
    try:
13
        current_page = int(current_page)
14
    except Exception:
15
        current_page = 1
16
    # 每页展示多少条
17
    per_page_num = 10
18
    # 动态计算出需要的总页数
19
    all_count = book_query.count()
20
    # 计算总数
21
    page_count, more = divmod(all_count, per_page_num)
22
    # 判断元祖的第二个数字是否为0,从而确定到底需要多少页来展示数据
23
    if more:
24
        page_count += 1
25

26
    page_html = ''
27
    # 前端动态页面展示 - 后端写好页面传给前端
28
    for count in range(1, page_count + 1):
29
        page_html += f'<li><a href="?page={count}">{count}</a></li>'
30

31
    # 起始位置
32
    start_page = (current_page - 1) * per_page_num
33
    # 终止位置
34
    end_page = current_page * per_page_num
35
    # 切片
36
    book_queryset = book_query[start_page:end_page]
37
    '''
38
    start_page = (current_page-1) * per_page_num
39
    end_page = current_page * per_page_num
40
    '''
41
    return render(request, 'ab_many.html', locals())

前端

1
{% for book_obj in book_queryset %}
2
    <p>{{ book_obj.title }}</p>
3
{% endfor %}
4

5
<nav aria-label="Page navigation">
6
    <ul class="pagination">
7
        <li>
8
            <a href="#" aria-label="Previous">
9
                <span aria-hidden="true">&laquo;</span>
10
            </a>
11
        </li>
12
        {# 前段转义 - 将后端的html页面进行转义，转为前端页码/也可以后端做这件事  #}
13
        {{ page_html|safe }}
14
        <li>
15
            <a href="#" aria-label="Next">
16
                <span aria-hidden="true">&raquo;</span>
17
            </a>
18
        </li>
19
    </ul>
20
</nav>

完成了分页操作的雏形，但是问题是前端页面展示的页码过于繁多

【六】美化分页器#

【1】引入#

上面是自定义分页器开发流程的基本思路

我们不需要掌握代码的编写，
只需要掌握基本用法即可

【2】示例#

在制作页码个数的时候，一般情况下是奇数个
符合中国人的审美

1
def ab_many(request):
2

3
    # 分页操作 推导
4

5
    # （1） 支持切片models.Book.objects.all()[1:20] --- 展示前20条数据
6
    # （2） 分页操作
7
    # 书籍对象
8
    book_query = models.Book.objects.all()
9
    # 想访问的页数
10
    current_page = request.GET.get('page', 1)  # 如果获取不到当前页码就展示第一页
11
    # 异常捕获
12
    try:
13
        current_page = int(current_page)
14
    except Exception:
15
        current_page = 1
16
    # 每页展示多少条
17
    per_page_num = 10
18
    # 动态计算出需要的总页数
19
    all_count = book_query.count()
20
    # 计算总数
21
    page_count, more = divmod(all_count, per_page_num)
22
    if more:
23
        page_count += 1
24

25
    # 纠正左侧负数页的问题
26
    left_page_count = current_page
27
    if current_page < 6:
28
        current_page = 6
29
    page_html = ''
30
    # 前端动态页面展示 - 后端写好页面传给前端
31
    for count in range(current_page - 5, current_page + 6):
32
        if left_page_count == count:
33
            # 第一页高亮显示
34
            page_html += f'<li class="active"><a href="?page={count}" >{count}</a></li>'
35
        else:
36
            page_html += f'<li><a href="?page={count}" >{count}</a></li>'
37
    # 起始位置
38
    start_page = (current_page - 1) * per_page_num
39
    # 终止位置
40
    end_page = current_page * per_page_num
41
    # 切片
42
    book_queryset = book_query[start_page:end_page]
43
    '''
44
    start_page = (current_page-1) * per_page_num
45
    end_page = current_page * per_page_num
46
    '''
47
    return render(request, 'ab_many.html', locals())

前端

1
{% for book_obj in book_queryset %}
2
    <p>{{ book_obj.title }}</p>
3
{% endfor %}
4

5
<nav aria-label="Page navigation">
6
    <ul class="pagination">
7
        <li>
8
            <a href="#" aria-label="Previous">
9
                <span aria-hidden="true">&laquo;</span>
10
            </a>
11
        </li>
12
        {# 前段转义 - 将后端的html页面进行转义，转为前端页码/也可以后端做这件事  #}
13
        {{ page_html|safe }}
14
        <li>
15
            <a href="#" aria-label="Next">
16
                <span aria-hidden="true">&raquo;</span>
17
            </a>
18
        </li>
19
    </ul>
20
</nav>

【七】封装分页器#

【1】自定义分页器封装代码#

1
class Pagination(object):
2
    def __init__(self, current_page, all_count, per_page_num=2, pager_count=11):
3
        """
4
        封装分页相关数据
5
        :param current_page: 当前页
6
        :param all_count:    数据库中的数据总条数
7
        :param per_page_num: 每页显示的数据条数
8
        :param pager_count:  最多显示的页码个数
9
        """
10
        try:
11
            current_page = int(current_page)
12
        except Exception as e:
13
            current_page = 1
14

15
        if current_page < 1:
16
            current_page = 1
17

18
        self.current_page = current_page
19

20
        self.all_count = all_count
21
        self.per_page_num = per_page_num
22

23
        # 总页码
24
        all_pager, tmp = divmod(all_count, per_page_num)
25
        if tmp:
26
            all_pager += 1
27
        self.all_pager = all_pager
28

29
        self.pager_count = pager_count
30
        self.pager_count_half = int((pager_count - 1) / 2)
31

32
    @property
33
    def start(self):
34
        return (self.current_page - 1) * self.per_page_num
35

36
    @property
37
    def end(self):
38
        return self.current_page * self.per_page_num
39

40
    def page_html(self):
41
        # 如果总页码 < 11个：
42
        if self.all_pager <= self.pager_count:
43
            pager_start = 1
44
            pager_end = self.all_pager + 1
45
        # 总页码  > 11
46
        else:
47
            # 当前页如果<=页面上最多显示11/2个页码
48
            if self.current_page <= self.pager_count_half:
49
                pager_start = 1
50
                pager_end = self.pager_count + 1
51

52
            # 当前页大于5
53
            else:
54
                # 页码翻到最后
55
                if (self.current_page + self.pager_count_half) > self.all_pager:
56
                    pager_end = self.all_pager + 1
57
                    pager_start = self.all_pager - self.pager_count + 1
58
                else:
59
                    pager_start = self.current_page - self.pager_count_half
60
                    pager_end = self.current_page + self.pager_count_half + 1
61

62
        page_html_list = []
63
        # 添加前面的nav和ul标签
64
        page_html_list.append('''
65
                    <nav aria-label='Page navigation>'
66
                    <ul class='pagination'>
67
                ''')
68
        first_page = '<li><a href="?page=%s">首页</a></li>' % (1)
69
        page_html_list.append(first_page)
70

71
        if self.current_page <= 1:
72
            prev_page = '<li class="disabled"><a href="#">上一页</a></li>'
73
        else:
74
            prev_page = '<li><a href="?page=%s">上一页</a></li>' % (self.current_page - 1,)
75

76
        page_html_list.append(prev_page)
77

78
        for i in range(pager_start, pager_end):
79
            if i == self.current_page:
80
                temp = '<li class="active"><a href="?page=%s">%s</a></li>' % (i, i,)
81
            else:
82
                temp = '<li><a href="?page=%s">%s</a></li>' % (i, i,)
83
            page_html_list.append(temp)
84

85
        if self.current_page >= self.all_pager:
86
            next_page = '<li class="disabled"><a href="#">下一页</a></li>'
87
        else:
88
            next_page = '<li><a href="?page=%s">下一页</a></li>' % (self.current_page + 1,)
89
        page_html_list.append(next_page)
90

91
        last_page = '<li><a href="?page=%s">尾页</a></li>' % (self.all_pager,)
92
        page_html_list.append(last_page)
93
        # 尾部添加标签
94
        page_html_list.append('''
95
                                           </nav>
96
                                           </ul>
97
                                       ''')
98
        return ''.join(page_html_list)

【2】自定义分页器使用示例#

（1）后端#

1
def get_book(request):
2
   book_list = models.Book.objects.all()
3
   current_page = request.GET.get("page",1)
4
   all_count = book_list.count()
5
   page_obj = Pagination(current_page=current_page,all_count=all_count,per_page_num=10)
6
   page_queryset = book_list[page_obj.start:page_obj.end]
7
   return render(request,'booklist.html',locals())

（2）前端#

1
<div class="container">
2
    <div class="row">
3
        <div class="col-md-8 col-md-offset-2">
4
            {% for book in page_queryset %}
5
            <p>{{ book.title }}</p>
6
            {% endfor %}
7
            {{ page_obj.page_html|safe }}
8
        </div>
9
    </div>
10
</div>

音乐

音乐

【一】引入#

【二】分页推导#

【1】理论#

【2】分析#

【三】手动切片#

【1】后端#

【2】前端#

【3】路由访问#

【四】分页器组件#

【1】参考bootstrap#

【2】优化后代码#

【五】动态计算页数#

【1】引入#

【2】计算题#

【3】内置方法之divmod#

（1）介绍#

（2）实战#

【六】美化分页器#

【1】引入#

【2】示例#

【七】封装分页器#

【1】自定义分页器封装代码#

【2】自定义分页器使用示例#

（1）后端#

（2）前端#

支持与分享

音乐

Django框架补充之分页器推导

【一】引入#

【二】分页推导#

【1】理论#

【2】分析#

【三】手动切片#

【1】后端#

【2】前端#

【3】路由访问#

【四】分页器组件#

【1】参考bootstrap#

【2】优化后代码#

【五】动态计算页数#

【1】引入#

【2】计算题#

【3】内置方法之divmod#

（1）介绍#

（2）实战#

【六】美化分页器#

【1】引入#

【2】示例#

【七】封装分页器#

【1】自定义分页器封装代码#

【2】自定义分页器使用示例#

（1）后端#

（2）前端#

支持与分享