【问题标题】:Django - PaginationDjango - 分页
【发布时间】:2021-05-23 07:09:41
【问题描述】:

我正在开发待办事项应用程序。 我有两种数据,

  1. 即将到来的待办事项和​​i>
  2. 已完成的待办事项。

所以,我将 views.py 中的数据过滤为即将到来的项目和已完成的项目。我想使用分页将它们显示在同一页面上。我也得到了结果,但如果即将到来的项目在第 1 页完成,我无法访问第 2 页,因为第 2 页的即将到来的项目是空的,但我有已完成项目的项目。我没看到。

views.py

@login_required(login_url='login')
def home(request):

    todo_form = TodoForm()
    current = timezone.now()

    todo_items_upcoming = Todo.objects.filter(user_id=request.user, completed=False).order_by('-date_created')

    todo_items_completed = Todo.objects.filter(user_id=request.user, completed=True)

    pagi1 = Paginator(todo_items_upcoming, 4)
    pagi2 = Paginator(todo_items_completed, 4)

    page_num = request.GET.get('page')
    page_num2 = request.GET.get('page')

    page_obj = pagi1.get_page(page_num)
    page_obj2 = pagi2.get_page(page_num2)

    if request.method == "POST":
        todo_form = TodoForm(request.POST)
        if todo_form.is_valid():
            data = todo_form.cleaned_data.get('title')

            obj = Todo.objects.create(date_created=current, title=data, user_id=request.user)

    context = {'todo_form':todo_form, 'page_obj':page_obj, 'page_obj2':page_obj2}
    return render(request, 'todo/main.html', context)

ma​​in.html

{% extends 'todo/index.html' %}
{% load crispy_forms_tags %}


{% block content %}

    <nav aria-label="...">
        <ul class="pagination justify-content-center">

            <!-- pagination - previous pages -->
            {% if page_obj.has_previous or page_obj2.has_previous %}

                <li class="page-item">
                    {% if page_obj.has_previous %}

                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}" tabindex="-1">&laquo;</a>
                    
                    {% else %}

                        <a class="page-link" href="?page={{ page_obj2.previous_page_number }}" tabindex="-1">&laquo;</a>

                    {% endif %}
                </li>

            {% endif %}

            <!-- pagination - current page -->
            <li class="page-item active">
                <a class="page-link" href="?page={{ page_obj.number }}">{{ page_obj.number }}</a>
            </li>

            <!-- pagination - Next pages -->
            {% if page_obj.has_next or page_obj2.has_next %}

                <li class="page-item">
                    {% if page_obj.has_next %}

                        <a class="page-link" href="?page={{ page_obj.next_page_number }}">&raquo;</a>
                    
                    {% else %}

                        <a class="page-link" href="?page={{ page_obj2.next_page_number }}">&raquo;</a>

                    {% endif %}
                </li>

            {% endif %}


        </ul>
    </nav>


    <div class="center-column">

        <h2 class="heading" style="text-align: center;">Hello {{ request.user.username }}, Here's your ToDo List</h2>
        
        <form action="" method="POST" id='form-create'>
            {% csrf_token %}
            <div style="text-align: center;">

                {{ todo_form.title }}
                
                <button type="submit" class="form-control btn btn-primary mb-3 mr-sm-2">Add Items</button>

            </div>
            
        </form>


        <h4 class="heading" style="text-align: center;">Upcoming ToDo Items</h4><br>
        <div class="row">
            <div class="col" id="upcomItem">
                <ul class="list-group" id="upcomingItems">

                    {% for i in page_obj %}

                        <li class="list-group-item list-group-item-primary mb-2" id="upcomingItem">{{ i.title }}

                            <div class="float-right">

                                <button type="submit" class="btn-sm btn-danger ml-2 mt-2 mr-2 mb-1"><a href="{% url 'delete_todo' i.id %}">Delete</a></button>
                                
                            </div>

                            <div class="float-right">

                                <button type="submit" class="btn-sm btn-success ml-2 mt-2 mr-2 mb-1" id="update_btn"><a href="{% url 'update_todo' i.id %}">Update</a></button>

                            </div>

                            <div class="float-right">
                        
                                <button type="submit" class="btn-sm btn-dark ml-2 mt-2 mr-2 mb-1" id="completed_btn"><a href="{% url 'completed_todo' i.id %}">Completed</a></button>

                            </div>              
                                        
                        </li>
                            
                    {% endfor %}

                </ul>
            </div>
        </div>

        <hr style="border-top: 1px solid #999; ">
        <div class="row">
            <div class="col">
                <h4 class="heading" style="text-align: center;">Completed ToDo Items</h4>
                <ul class="list-group" id='compItems'>


                    {% for i in page_obj2 %}<hr>

                        <li class="list-group-item list-group-item-primary mb-2" id="upcomingItem">{{ i.title }}

                        <div class="float-right">

                            <button type="submit" class="btn-sm btn-danger ml-2 mt-2 mr-2 mb-1"><a href="{% url 'delete_todo' i.id %}">Delete</a></button>
                                
                        </div>                              

                        <div class="float-right">

                            <button type="submit" class="btn-sm btn-success ml-2 mt-2 mr-2 mb-1" ><a href="{% url 'update_todo' i.id %}">Update</a></button>

                        </div>
                        </li>
                    {% endfor %}

                </ul>
            </div>
        </div>

    </div>

{% endblock %}

起初我在 if 条件下的模板标签中使用了 or,但出现此错误。当我尝试添加新的待办事项时出现错误消息

我在模板标签中尝试了 and 运算符,但我没有获得 page-2 链接,尽管我有即将到来的项目并且没有额外完成的项目。

【问题讨论】:

标签: django pagination multiple-instances django-pagination


【解决方案1】:

使用or 运算符,如@Willem 所指。而你的active link href必须是{{ page_obj.number }}而不是{{ page_obj.page_number }}

<li class="page-item active">
    <a class="page-link" href="?page={{ page_obj.number }}">{{ page_obj.number }}</a>
</li>

您可以在 第 18 行

的模板中看到您的错误 EmptyPage

【讨论】:

  • 感谢@NKSM 帮助我解决了这个空页错误
【解决方案2】:

你的条件应该是分页器条件的析取,所以or而不是and

{% if page_obj.has_previous or page_obj2.has_previous %}
    …
{% endif %}

.has_next 也一样。然后应该通过检查哪个页面对象具有下一页来处理上一页和下一页,因此:

{% if page_obj.has_next or page_obj2.has_next %}
    <li class="page-item">
        {% if page_obj.has_next %}
            <a class="page-link" href="?page={{ page_obj.next_page_number }}">&raquo;</a>
        {% else %}
<a class="page-link" href="?page={{ page_obj2.next_page_number }}">&raquo;</a>
        {% endif %}
    </li>
{% endif %}

话虽如此,我不确定这是否能提供最佳用户体验。也许最好制作两个单独的分页(所以使用?pagedone=…&amp;pagetodo=…)。

【讨论】:

  • 我在模板标签中使用了or 我得到了空页错误。当我在模板标签中使用and 运算符时
  • @goku_cv:是的,你需要检查哪个分页器有下一页,并相应地更新。见编辑。
  • 我已经按照你说的更新了。对于即将到来的项目和已完成的项目,每页的项目数为 4,因此,总共 8 个。如果只有 4 个即将到来的项目和 6 个已完成的项目,则页面链接正在更改,但内容与第一页相同。我无法看到剩余的 2 项已完成项目。如果我还有 5 个即将到来的和 6 个已完成的,那么我可以查看与第 2 页对应的项目。
  • @goku_cv:你如何渲染这些项目?
  • 我已经从 page_obj 和 page_obj 迭代以显示在 html 中。我已经提供了完整的 html 代码。
猜你喜欢
  • 2012-08-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-08-11
  • 1970-01-01
  • 1970-01-01
  • 2022-10-05
  • 1970-01-01
相关资源
最近更新 更多