如何让django-tables2的省略式分页正常工作？

问题场景 #

我在用django-tables2 v2.5.2渲染产品表格，分页控件显示为['prev',1,2,3,4,5,'...',18,'next']。其他页码按钮都带正确的href='?page=x'，点击能正常跳转，但省略号按钮的href是#，点击完全没反应。我原本以为省略号能用来加载中间的页码范围，后来搞清楚了正确的处理方式。

相关代码 #

views.py #

def product_list(request: HttpRequest):
    all_items = Product.objects.all().order_by("-publish_date")
    product_filter = ProductFilter(request.GET, queryset=all_items)
    table = ProductTable(product_filter.qs)
    RequestConfig(request, paginate={"per_page": 5}).configure(table)
    return render(
        request, "product/product_list.html", {"table": table, "filter": product_filter}
    )

tables.py #

class ProductTable(tables.Table):
    image_url = ImageColumn(verbose_name="Image")
    publish_date = tables.DateColumn(format="d M Y", order_by=["publish_date"])
    user = tables.Column(verbose_name="Verified by")
    title = tables.Column(verbose_name="Product")

    class Meta:
        model = Product
        template_name = "django_tables2/bootstrap.html"
        sequence = ("title", "producer", "user", "status", "publish_date", "image_url")
        exclude = ("id", "image_url")
        filterset_class = ProductFilter

解决办法 #

实际上django-tables2里的分页省略号本来就不是可点击元素，它的href='#'是正确的默认设置。想要优化用户体验，可以通过CSS调整样式，模仿Stack Overflow的分页效果：

/* 针对django-tables2分页中的省略号按钮 */
.pagination .ellipsis {
    pointer-events: none; /* 禁止点击事件 */
    cursor: default;     /* 修改光标为默认样式 */
}

这样设置后，用户点击省略号不会有无效跳转的反馈，视觉上也能明确这是分隔标识而非可交互按钮。

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