Django分页器高级版

最新推荐文章于 2024-09-15 22:31:42 发布

weixin_30746117

最新推荐文章于 2024-09-15 22:31:42 发布

阅读量126

点赞数

文章标签： python javascript ViewUI

原文链接：http://www.cnblogs.com/apollo1616/articles/9880852.html

版权

paginator.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Django分页系统</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>

<div class="container ">
    <div class="form-horizontal  form-group jumbotron">
        <a href="" class="btn btn-default">HOME</a>
        <a href="{% url 'b_add' %}" class="btn btn-primary">ADD</a>
        <a href="{% url 'b_delete' 0 %}" class="btn btn-success">DELETE</a>
        <a href="{% url 'b_modify' 0 %}" class="btn btn-info">MODIFY</a>
        <a href="{% url 'b_query' %}" class="btn btn-warning">QUERY</a>
        <a href="{% url 'index' %}" class="btn btn-danger">README</a>
    </div>


    {# 渲染数据到网页 #}
    <table class="table table-striped table-hover">
        <thead>
        <tr>
            <th>序号</th>
            <th>书名</th>
            <th>价格</th>
            <th>出版时间</th>
            <th>出版社</th>
            <th>作者</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for book_obj in book_lst %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ book_obj.title }}</td>
                <td>{{ book_obj.price }}</td>
                <td>{{ book_obj.pub_date|date:'Y-m-d' }}</td>
                <td>{{ book_obj.publish.name }}</td>
                <td>
                    {% for author in book_obj.authors.all %}
                        <span>{{ author.name }}</span>
                        {% if not forloop.last %}
                            ,
                        {% endif %}
                    {% endfor %}
                </td>
                <td>
                    <a class="btn btn-warning btn-sm"
                       href="{% url 'b_modify' book_obj.pk %}">编辑</a>
                    <button id="btn_del" class="btn btn-danger btn-sm" index={{ book_obj.nid }}>删除</button>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

    <nav aria-label="Page navigation">
        <ul class="pagination">
            {# 上一页相关处理 #}
            {% if book_lst.has_previous %}
                <li>
                    <a href="?page={{ book_lst.previous_page_number }}" aria-label="Previous">
                        <span aria-hidden="true">上一页</span>
                    </a>
                </li>
            {% else %}
                <li class="disabled" title="亲,已经是第一页啦"><a href="">上一页</a></li>
            {% endif %}

            {# 数字按钮处理 #}
            {% for num in pageRange %}
                {% if num == currentPage %}
                    <li class="active"><a href="?page={{ num }}">{{ num }}</a></li>
                {% else %}
                    <li><a href="?page={{ num }}">{{ num }}</a></li>
                {% endif %}
            {% endfor %}

            {# 下一页相关处理 #}
            {% if book_lst.has_next %}
                <li>
                    <a href="?page={{ book_lst.next_page_number }}" aria-label="Next">
                        <span aria-label="true">下一页</span>
                    </a>
                </li>
            {% else %}
                <li class="disabled" title="亲,已经是最后一页啦"><a href="">下一页</a></li>
            {% endif %}

        </ul>
    </nav>

    {#底部返回首页#}
    <div style="width: 100px;
    height: 100px;
    background-color: orangered;
    color: white;
    text-align: center;
    line-height: 100px;
    position: absolute;
    right: 10px;
    bottom: 10px; ">
        <a href="{% url 'b_index' %}">返回首页</a>
    </div>
    {% csrf_token %}
</div>


<script src="/static/js/jquery.js"></script>
<script>
    $(function () {
        $('#btn_del').click(function () {
            var b_delete_id = $(this).attr('index');
            var url = '/book/b_delete/' + b_delete_id + '/';
            var tag = $(this).parent().parent();
            $.ajax({
                url: url,
                type: 'get',
                success: function (response) {
                    tag.children().html('').first().html(response).css('color', 'red')
                }
            })
        });

    })
</script>

</body>
</html>

urls.py文件

from django.urls import path, re_path, include
from book import views

urlpatterns = [
    re_path('^paginator/$',  views.paginator, name='paginator'),
]

views.py

from django.shortcuts import render, HttpResponse, reverse, redirect
from book.models import *
from django.core.paginator import Paginator, Page, EmptyPage, PageNotAnInteger
from django.db.models import Count, Avg, Max, Min, Sum


# Create your views here.
def paginator(request):
    # 1.获取所有图书列表
    book_lst = Book.objects.all()
    # 2.实例化,确定每页显示条数,比如:3
    paginator = Paginator(book_lst, 1)
    # 3.获取浏览器的请求显示页码,如果没有,默认显示,比如:1
    page = request.GET.get("page", 1)
    # 4.处理浏览器请求的页码,page代表用户想看的页码.
    currentPage = int(page)

    # 分情况处理页码显示问题,正常显示为11页,
    # 当前页:PAGE[上一页][ * * * * * PAGE * * * * * ][下一页]
    # 1.总页数(paginator.num_pages)大于11时;
    if paginator.num_pages > 11:
        # 当前页码
        if currentPage - 5 < 1:
            # 页的范围paginator.page_range
            pageRange = range(1, 11)
        # 当前页码
        elif currentPage + 5 > paginator.num_pages:
            # 页的范围paginator.page_range
            pageRange = range(currentPage - 10, paginator.num_pages + 1)
        else:
            # 页的范围paginator.page_range
            pageRange = range(currentPage - 5, currentPage + 5)
    # 2.总页数(paginator.num_pages)小于11时;
    else:
        # 页的范围paginator.page_range
        pageRange = paginator.page_range

    try:
        print(page)
        book_lst = paginator.page(page)
    except PageNotAnInteger:
        book_lst = paginator.page(1)
    except EmptyPage:
        book_lst = paginator.page(paginator.num_pages)

    return render(request, 'paginator.html', {"currentPage": currentPage, "book_lst": book_lst,
                                              "pageRange": pageRange})