Django的分页器Paginator(2)

由于这样子的按钮不美观,也太别扭了,解决:

第一步:

把html模板改成如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

</head>
<body>
<div class="container">

    <h4>分页器</h4>
    <ul>

        {% for book in page %}
             <li>{{ book.title }} -----{{ book.price }}</li>
        {% endfor %}

     </ul>
    <nav aria-label="Page navigation">
        <ul class="pagination">

                <li>
                    <a href="/books?page=1" aria-label="Next">
                        <span aria-hidden="true">第一页</span>
                    </a>
                </li>

                    {% for foo in page_range %}
                        
                        <li><a href="">{{ foo }}</a></li>
                
                    {% endfor %}

                <li>
                    <a href="/books?page={{ paginator.num_pages }}" aria-label="Next">
                        <span aria-hidden="true">最后一页</span>
                    </a>
                </li>

        </ul>
    </nav>
</div>
</body>
</html>

后端:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

</head>
<body>
<div class="container">

    <h4>分页器</h4>
    <ul>

        {% for book in page %}
             <li>{{ book.title }} -----{{ book.price }}</li>
        {% endfor %}

     </ul>
    <nav aria-label="Page navigation">
        <ul class="pagination">

                <li>
                    <a href="/books?page=1" aria-label="Next">
                        <span aria-hidden="true">第一页</span>
                    </a>
                </li>

                    {% for foo in page_range %}
                        <li><a href="/books/?page={{ foo }}">{{ foo }}</a></li>
                    {% endfor %}

                <li>
                    <a href="/books?page={{ paginator.num_pages }}" aria-label="Next">
                        <span aria-hidden="true">最后一页</span>
                    </a>
                </li>

        </ul>
    </nav>
</div>
</body>
</html>

结果:

第二步:

加深按钮颜色:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

</head>
<body>
<div class="container">

    <h4>分页器</h4>
    <ul>

        {% for book in page %}
             <li>{{ book.title }} -----{{ book.price }}</li>
        {% endfor %}

     </ul>
    <nav aria-label="Page navigation">
        <ul class="pagination">

                <li>
                    <a href="/books?page=1" aria-label="Next">
                        <span aria-hidden="true">第一页</span>
                    </a>
                </li>


                    {% for foo in page_range %}
                        {% if i == visit_page_num %}
                        <li class="active"><a href="/books/?page={{ foo }}">{{ foo }}</a></li>
                        {% else %}
                        <li><a href="/books/?page={{ foo }}">{{ foo }}</a></li>
                        {% endif %}
                    {% endfor %}

                <li>
                    <a href="/books?page={{ paginator.num_pages }}" aria-label="Next">
                        <span aria-hidden="true">最后一页</span>
                    </a>
                </li>

        </ul>
    </nav>
</div>
</body>
</html>

第三步:

page=0的时候还是会有错误,此时我们应该要添加判断。

在views.py文件中更改:

from django.shortcuts import render, HttpResponse
from .models import Book


def create(request):
    Booklist = []
    for i in range(101):
        Booklist.append(Book(title="book" + str(i), price=i * 2))
    Book.objects.bulk_create(Booklist)
    return HttpResponse("插入成功")


from django.core.paginator import Paginator


def index(request):
    book_list = Book.objects.all()
    #(1)分页对象
    paginator = Paginator(book_list, 5)  #每页5条数据

    #分页信息
    print(paginator.count)  #总数量 1000
    print(paginator.num_pages)  #分页的数量  13页
    print(paginator.page_range)  #分页列表range(1,14)

    try:
        #(2)获取某页对象
        visit_page_num = int(request.GET.get('page', 1))
        page = paginator.page(visit_page_num)  #page(哪一页的数据)
        print(visit_page_num)
        #获取该页的所有数据
        #方式一:
        # print(page.object_list)
        #
        # #方式二:
        # for book in page:
        #     print(book)

        #某页对象其他属性

        # print(page.next_page_number()) #下一页
        # print(page.previous_page_number())  #上一页
        # print(page.has_next())  #是否有下一页   True
        # print(page.has_previous())  #是否有上一页  True

        # page_book_list = page.object_list
        if visit_page_num == 1:
            page_range = range(1,4)
        elif visit_page_num == paginator.num_pages:
            page_range = range(paginator.num_pages-2, paginator.num_pages + 1)
        else:
            page_range = [visit_page_num-1,visit_page_num,visit_page_num+1]


        return render(request, 'index2.html', {"page": page, "paginator": paginator, "visit_page_num": visit_page_num,"page_range": page_range})
    except Exception as e:
        page = paginator.page(1)

    visit_page_num = int(request.GET.get('page', 1))
    page_range = [visit_page_num - 1, visit_page_num, visit_page_num + 1]
    return render(request, 'index2.html', {"page": page, "paginator":paginator,"visit_page_num":visit_page_num,"page_range": page_range})
    # return render(request,'index.html',{"page":page,"paginator":paginator,"visit_page_num":visit_page_num})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值