Почему пагинация ListView в django не работает?

Я выполняю CS50W, сетевой проект, когда я хочу перейти к следующему/вернуться к пагинации моего сайта. Ничего не происходит. Я пытался отладить файл view.py, каждый раз, когда я нажимал кнопку next или previous в script.js, все возвращалось page_number, как none в views.py. Я понятия не имею, почему это произошло. Не могли бы вы мне помочь?

Вот код в моем views.py :

def index(request):
    return render(request, "network/index.html")

def allPosts(request):
    # Get all posts data - json
    allPosts = Post.objects.all()
    # Return emails in reverse chronologial order
    allPosts = allPosts.order_by("-timestamp").all()
    # Show 2 contacts per page.
    paginator = Paginator(allPosts, 2) 
    page_number = request.GET.get('page')
    page_obj = paginator.get_page(page_number)
    # return json all posts
    data = {
        'posts': [post.serialize() for post in page_obj],
        'page': {
            'has_previous': page_obj.has_previous(),
            'previous_page': page_obj.has_previous() and page_obj.previous_page_number() or None,
            'has_next': page_obj.has_next(),
            'next_page': page_obj.has_next() and page_obj.next_page_number() or None,
            'num_pages' : page_obj.paginator.num_pages,
            'current_page' : page_number
        }
    }
    return JsonResponse(data, safe=False)

Код в моем script.js файле:

document.addEventListener('DOMContentLoaded', function() {
    // Use buttons to toggle between views
    document.querySelector('.showallPosts').addEventListener('click',showallPosts);
    showallPosts();
  });

  function showallPosts(){
    // Clear out composition field
    document.querySelector('#allPosts-view').value = '';
    // Show the mailbox name
    document.querySelector('#allPosts-view').innerHTML = `
        <h3>All Posts</h3>
    `;
    // Get data
    fetch(`/allPosts`)
    .then(response => response.json())
    .then(result => {
      //Process to get data
      for(let i = 0; i < result.posts.length; i++) {
        const newDiv = document.createElement('div');
        newDiv.classList.add('list-group-item');
        let post = result.posts[i];
        let post_timestamp = post.timestamp;
        let post_author = post.author;
        let post_content = post.content;
        let post_likes = post.likes;
        newDiv.innerHTML = `
          <h5>Author: ${post_author}</h5>
          <h6>At: ${post_timestamp}</h6>
          <p>Has wrote: ${post_content}</p>
          <p><strong>Likes</strong>: ${post_likes}</p>
        `;
        document.querySelector('#allPosts-view').append(newDiv);
      }
      page = result.page;
      const toggleDiv = document.createElement('div');
      toggleDiv.classList.add('pagination');
      if (page.has_previous) {
        toggleDiv.innerHTML = `
            <a href="?page=1">&laquo; first</a>
            <a href="?page=${page.previous_page}">previous</a>
        `;
      }
      if (page.has_next) {
        toggleDiv.innerHTML += `
          <a href="?page=${page.next_page}">next</a>
          <a href="?page=${page.num_pages}">last &raquo;</a>
        `;
      }
      document.querySelector('#toggle').append(toggleDiv);
    })
  }

Мой urls.py файл:


from django.urls import path

from . import views

urlpatterns = [
    path("", views.index, name="index"),
    path("login", views.login_view, name="login"),
    path("logout", views.logout_view, name="logout"),
    path("register", views.register, name="register"),
    path("createPost", views.createPost, name="createPost"),
    path("allPosts", views.allPosts, name="allPosts")
]

Я ожидаю, что на странице будут отображаться другие сообщения, но нет. Это всегда первая страница пагинации.

Вы всегда выполняете выборку без параметра страницы. Действительно:

fetch(`/allPosts`)

Вы не добавляете ?page= параметр, поэтому он всегда будет получать данные первой страницы.

Вы должны найти ?page= параметр на странице и добавить его в fetch запрос, например:

const searchParams = new URLSearchParams(window.location.search);
fetch(`/allPosts?` + new URLSearchParams({
    page: searchParams.get('page') || 1
}))
Вернуться на верх