为什么在 django 中对 ListView 进行分页不起作用？

Question

我正在做 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")
]

我希望页面能显示其他帖子，但没有。它始终是分页的第一页。

Answer 1

您总是在没有页面参数的情况下进行获取。确实：

fetch(`/allPosts`)

您没有添加

?page=

参数，因此它将始终获取 first 页面的数据。

您应该在页面中查找

?page=

参数，并将其添加到

fetch

请求中，例如：

const searchParams = new URLSearchParams(window.location.search);
fetch(`/allPosts` + new URLSearchParams({
    page: searchParams.get('page') || 1
}))