Django Pagination - Query parameter(url)

Question

I'm currently working on To-Do App using Django web framework. I have two separate containers(list) which are upcoming items and completed to-do items. Furthermore, I'm not sure how to add this feature which was If I click page-3 in upcoming Item, and then I click page-2 in completed Items I'm redirecting to page-1 in upcoming Items and page-2 in completed Items. I don't want like this. I wanted like page-3 in upcoming and page-2 in completed. Is there any method I can do it with Django or JavaScript.

I have also attached the image of app I have created.

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)

main.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']

score 1 · Accepted Answer · answered Feb 24 '21 at 06:44

Update in HTML template the respective urls with missing url querystring, meaning add upcoming in the completed to do list, and completed in upcoming list. For example:

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

score 0 · Answer 2 · answered Feb 24 '21 at 06:50

you have to use a script to call pagination.

when you click on pagination link will redirect to ?upcomming=10 the URL will be like www.xyz.com?upcomming=10

after you click completed then the new URL will be www.xyz.com?completed=11

your old URL will be overridden.

in your code, you have written if upcoming is not in GET then take default value 1. so it causes this problem

to solve this use onclick event. and in it

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

so your new URL will be like www.xyz.com?completed=11&upcomming=25

Django Pagination - Query parameter(url)

2 Answers2