【问题标题】:Django Pagination - Query parameter(url)Django Pagination - 查询参数(url)
【发布时间】:2021-05-26 10:52:41
【问题描述】:

我目前正在使用 Django Web 框架开发待办事项应用程序。我有两个单独的容器(列表),它们是即将到来的项目和已完成的待办事项。此外,我不确定如何添加此功能,即如果我在 upcoming Item 中单击 page-3,然后单击 page-2已完成的项目 我正在重定向到即将到来的项目中的第 1 页和已完成项目中的第 2 页。我不想这样。我希望即将发布的第 3 页和已完成的第 2 页。有什么方法我可以用 Django 或 JavaScript 做到这一点。

我还附上了我创建的应用程序的图像。

models.py

class Todo(models.Model):

    date_created = models.DateTimeField(auto_now_add=True)
    completed = models.BooleanField(default=False)
    title = models.CharField(max_length=200)

    user_id = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)

    def __str__(self):
        return self.title

views.py

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('upcoming', 1)
    page_num2 = request.GET.get('completed', 1)

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

    if request.method == "POST":
        todo_form1 = TodoForm(request.POST)
        if todo_form1.is_valid():
            data = todo_form1.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, 'pagi1':pagi1, 'pagi2':pagi2,
                 'page_num2':int(page_num2),'page_num':int(page_num)}
    return render(request, 'todo/main.html', context)

ma​​in.html

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


{% block content %}


    <div class="center-column">

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

                <div class="input-group-append">
                    {{ todo_form.title}}

                    <button type="submit" class="form-control btn btn-primary mb-3 mr-sm-2" id="addItem">Add Items</button>

                </div>

            </form>
        
        
        <!-- Upcoming To DO Items -->
        <h4 class="heading">Upcoming ToDo Items</h4>
        
        <ul class="pagination justify-content-center">

            {% for i in pagi1.page_range %}

                <li class="page-item {% if i == page_num %} active {% endif %}">
                        <a class="page-link" href="?upcoming={{ i }}">{{ i }}</a>
                </li>

            {% endfor %}
        </ul>

        <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>

    </div>


<!-- Completed To Do Items -->
    <div class="center-column">

        <h4 class="heading">Completed ToDo Items</h4>
        
        <ul class="pagination justify-content-center">

            {% for i in pagi2.page_range %}

                <li class="page-item {% if i == page_num2 %} active {% endif %}">
                        <a class="page-link" href="?completed={{ i }}">{{ i }}</a>
                </li>

            {% endfor %}
        </ul>

        <div class="row">
            <div class="col" id="upcomItem">
                <ul class="list-group" id="upcomingItems">

                    {% for i in page_obj2 %}

                        <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>          
                                        
                        </li>
                            
                    {% endfor %}                    
                    
                </ul>
                
            </div>
        </div>

    </div>

{% endblock %}

forms.py

class TodoForm(forms.ModelForm):
    
    class Meta:
        model = Todo
        fields = ['title', 'completed']

【问题讨论】:

    标签: django django-views django-forms django-templates django-pagination


    【解决方案1】:

    在 HTML 模板中更新缺少 url 查询字符串的相应 url,这意味着在已完成的待办事项列表中添加 upcoming,在即将完成的列表中添加 completed。例如:

    // upcoming
    
    <li class="page-item {% if i == page_num %} active {% endif %}">
                        <a class="page-link" href="?upcoming={{ i }}&completed={{ page_num2 }}">{{ i }}</a>
    </li>
    
    // completed
    
    <li class="page-item {% if i == page_num2 %} active {% endif %}">
                        <a class="page-link" href="?completed={{ i }}&upcoming={{ page_num }}">{{ i }}</a>
    </li>
    

    【讨论】:

      【解决方案2】:

      你必须使用脚本来调用分页。

      当您点击分页链接将重定向到 ?upcomming=10 时,URL 将类似于 www.xyz.com?upcomming=10

      点击完成后,新的网址将是www.xyz.com?completed=11

      您的旧网址将被覆盖。

      在您的代码中,您已经编写了如果即将到来的不在 GET 中,则采用默认值 1。 所以导致了这个问题

      使用 onclick 事件来解决这个问题。 并在其中

      var href = new URL(window.location.href)
      href.searchParam.set('upcomming',value)
      href.searchParam.set('completed',value)
      window.location.href = href.toString()
      

      所以您的新网址将类似于www.xyz.com?completed=11&amp;upcomming=25

      【讨论】:

        猜你喜欢
        • 2019-01-03
        • 1970-01-01
        • 1970-01-01
        • 2018-12-24
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-06-28
        相关资源
        最近更新 更多