Django 分页“无限滚动”与 HTMX 不正确的插入顺序

Question

我正在尝试使用

HTMX

实现称为“无限滚动”的分页。除了新插入对象的顺序并不总是正确之外，一切正常。 例如，如果视图

paginate_by = 10

，则前 10 个对象按预期排序，接下来的 10 个对象将被插入，但会出现一些顺序失败：7-8 个对象按预期排序，其余 2 个对象应该位于插入到表中的表顶部结束。

View

：

class ShippedProductListView(ListView):
    model = models.Product
    context_object_name = "products"
    paginate_by = 10
    ordering = ['-shipment__shipment_date']

    def get_queryset(self):
        queryset = models.Product.objects.filter(status=models.ProductStatus.SENT)
        return queryset

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['total_count'] = self.get_queryset().count()
        return context

HTML

：

<table>
  <!-- some content here -->
    <tbody>
        {% include "production/shipped_products_table.html" with products=products %}
        <!-- Shipped products table updates with htmx -->
    </tbody>
</table>

shipped_products_table.html

：

{% for d in products %}
    {% if forloop.last %}
    <tr
        hx-trigger="revealed"
        hx-get="{% url 'shipped_products_list' %}?page={{ page_obj.number|add:1 }}"
        hx-swap="afterend"
        h
    >
    {% else %}
    <tr>   
    {% endif %}
    <tr>
        <td><a class="link-success" href="{% url 'products_detail' sn=d.serial_number %}">{{ d.serial_number }}</a></td>
        <!-- some more content here -->
    </tr>
{% empty %}
    <h5 class="pt-4">Nothing here yet.</h5>
{% endfor %}

这是正常行为还是我遗漏了什么？

Answer 1

您的查询集未排序，这将导致分页期间页面不一致。

    def get_queryset(self):
        queryset = models.Product.objects.filter(status=models.ProductStatus.SENT).order_by('-pk')