Django分页功能失效求助：CS50W Network项目分页按钮无响应

你的核心问题在于分页按钮的实现逻辑错误：

• 生成的<a>标签href是?page=xxx，点击后会触发页面跳转到首页（/），而非向/allPosts接口传递page参数。
• showallPosts函数里的fetch始终请求/allPosts，未携带任何page查询参数，导致后端request.GET.get('page')一直拿到None，默认返回第一页数据。

修改前端script.js代码，让分页按钮通过AJAX请求对应页码的帖子，而非刷新页面：

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('.showallPosts').addEventListener('click', () => showallPosts(1));
    showallPosts(1);
});

function showallPosts(pageNum = 1) {
    // 清空内容和分页按钮容器
    document.querySelector('#allPosts-view').innerHTML = `<h3>All Posts</h3>`;
    document.querySelector('#toggle').innerHTML = '';

    // 携带page参数请求API
    fetch(`/allPosts?page=${pageNum}`)
    .then(response => response.json())
    .then(result => {
        // 渲染帖子
        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];
            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);
        }

        const page = result.page;
        const toggleDiv = document.createElement('div');
        toggleDiv.classList.add('pagination');

        // 生成上一页/首页按钮
        if (page.has_previous) {
            const firstBtn = document.createElement('a');
            firstBtn.textContent = '« first';
            firstBtn.href = '#';
            firstBtn.addEventListener('click', (e) => {
                e.preventDefault();
                showallPosts(1);
            });
            toggleDiv.appendChild(firstBtn);

            const prevBtn = document.createElement('a');
            prevBtn.textContent = 'previous';
            prevBtn.href = '#';
            prevBtn.addEventListener('click', (e) => {
                e.preventDefault();
                showallPosts(page.previous_page);
            });
            toggleDiv.appendChild(prevBtn);
        }

        // 生成下一页/末页按钮
        if (page.has_next) {
            const nextBtn = document.createElement('a');
            nextBtn.textContent = 'next';
            nextBtn.href = '#';
            nextBtn.addEventListener('click', (e) => {
                e.preventDefault();
                showallPosts(page.next_page);
            });
            toggleDiv.appendChild(nextBtn);

            const lastBtn = document.createElement('a');
            lastBtn.textContent = 'last »';
            lastBtn.href = '#';
            lastBtn.addEventListener('click', (e) => {
                e.preventDefault();
                showallPosts(page.num_pages);
            });
            toggleDiv.appendChild(lastBtn);
        }

        document.querySelector('#toggle').append(toggleDiv);
    })
}

1. 给showallPosts添加pageNum参数，默认值为1（第一页）。
2. 请求API时携带?page=${pageNum}参数，让后端能正确获取页码。
3. 每次调用函数前清空#toggle容器，避免重复生成分页按钮。
4. 将分页链接改为通过addEventListener绑定点击事件，阻止默认跳转行为，调用对应页码的showallPosts。
5. 移除了不必要的document.querySelector('#allPosts-view').value = ''（该元素是div，无value属性）。

你的后端views.py和urls.py代码无需修改，逻辑是正确的。

内容的提问来源于stack exchange，提问作者Khoa Nguyễn