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 defaultordering
on the model.
def get_queryset(self):
queryset = models.Product.objects.filter(status=models.ProductStatus.SENT).order_by('-pk')