Django pagination "infinity scroll" with HTMX incorect insert order

I'm trying to implement pagination known as "infinite scroll" with HTMX. All works fine except ordering of newly inserted objects not always correct. For example if view paginate_by = 10 then first 10 objects ordered as expected and next 10 objects will be inserted with some order failures: 7-8 object are ordered as expected and rest 2 object which supposed to be on top of the table inserted in the end.

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 %}

Is that a normal behavior or I'm missing something?

Your queryset isn't ordered, which will cause inconsistent pages during pagination:

For consistent pagination, QuerySets should be ordered, e.g. with an order_by() clause or with a default ordering on the model.

    def get_queryset(self):
        queryset = models.Product.objects.filter(status=models.ProductStatus.SENT).order_by('-pk')
Вернуться на верх