Django可滚动表格无限滚动功能失效求助

• Waypoints 默认监听window对象的滚动事件，但你的表格是在带有overflow:scroll的容器内滚动，容器的滚动不会触发window的滚动，因此Waypoints无法检测到滚动到底部的动作。
• 大概率未正确配置Waypoints的context选项，未将监听目标指向可滚动的容器元素。

1. 指定Waypoints的上下文（context）
   初始化Waypoints时，将context设置为你的可滚动表格容器，而非默认的window。示例代码：

   // 假设可滚动容器的选择器是.scrollable-table-container
   const initWaypoint = () => {
     new Waypoint({
       element: document.getElementById('load-more-trigger'), // 放在表格底部的触发占位元素
       context: document.querySelector('.scrollable-table-container'),
       handler: function(direction) {
         if (direction === 'down') {
           // 加载下一页数据的AJAX逻辑
           fetch(`/your-api-url/?page=${nextPageNumber}`)
             .then(res => res.text())
             .then(html => {
               // 追加新数据到表格tbody
               document.querySelector('.scrollable-table-container table tbody').insertAdjacentHTML('beforeend', html);
               nextPageNumber++;
               // 销毁旧Waypoint并重新初始化，避免重复触发
               this.destroy();
               initWaypoint();
             });
         }
       },
       offset: '100%' // 触发元素进入容器可视区域时执行逻辑
     });
   };
   
   // 初始化
   let nextPageNumber = 2;
   initWaypoint();
   

   注意：必须在容器内的表格底部放置一个触发元素（如<div id="load-more-trigger"></div>），作为Waypoints的检测目标。

2. 确保容器高度固定
   带有overflow:scroll的容器必须设置明确高度（比如height: 500px或max-height: 80vh），否则容器会自动拉伸适配内容，不会出现滚动条，Waypoints自然无法触发。

如果Waypoints配置繁琐，可直接监听容器滚动事件，手动判断滚动位置：

const container = document.querySelector('.scrollable-table-container');
let isLoading = false;
let nextPageNumber = 2;

container.addEventListener('scroll', () => {
  // 判断是否滚动到容器底部（预留10px的触发阈值）
  if (container.scrollTop + container.clientHeight >= container.scrollHeight - 10 && !isLoading) {
    isLoading = true;
    fetch(`/your-api-url/?page=${nextPageNumber}`)
      .then(res => res.text())
      .then(html => {
        document.querySelector('.scrollable-table-container table tbody').insertAdjacentHTML('beforeend', html);
        nextPageNumber++;
        isLoading = false;
      })
      .catch(err => {
        console.error('加载失败:', err);
        isLoading = false;
      });
  }
});

确保分页视图针对AJAX请求仅返回表格行片段，而非完整页面，方便直接追加到现有表格中。示例视图代码：

from django.core.paginator import Paginator
from django.shortcuts import render
from .models import YourModel

def table_data(request):
    items = YourModel.objects.all()
    paginator = Paginator(items, 10) # 每页10条数据
    page_number = request.GET.get('page', 1)
    page_obj = paginator.get_page(page_number)
    
    if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
        # AJAX请求返回仅表格行的片段
        return render(request, 'table_rows.html', {'page_obj': page_obj})
    # 首次加载返回完整页面
    return render(request, 'table_page.html', {'page_obj': page_obj})

对应的table_rows.html仅渲染表格行：

{% for item in page_obj %}
<tr>
  <td>{{ item.field1 }}</td>
  <td>{{ item.field2 }}</td>
</tr>
{% endfor %}

内容的提问来源于stack exchange，提问作者southernegro