How to make elided pagination work in django-tables2

Question

I am trying to use django-tables2 v2.5.2 to render a table of products.

Pagination renders correctly, it basically looks like:

['prev',1,2,3,4,5,'...',18,'next']

each button is tag with href='?page=x' and after click it updates url with the page parameter but ellpsis button ('...') has href='#' and obviously does nothing when clicked on. Other pages buttons works fine.

Do you have any idea how to setup django and/or django-tables2 to make elided pagination work?

I am trying to setup simple table with products. I am using function view and RequestConfig, like this:

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

and my tables.py code looks like this:

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

I tried to read documentation to django-tables2 and django framework but I think I must be missing something.

I am expecting the ellipsis button in pagination to load missing page range, so I guess it needs to have href set to something else than '#'.

EDIT:

I think I found the solution that works for me and most likely is what I was supposed to do.

The ellipsis button should not be clickable in the first place, its href='#' is set to correct value.

I styled the button with css to make it unclickable via pointer-events:none, changed cursor to look like its not clickable.

Basically I made the pagination look like and behave like pagination on StackOverflow (check bottom of the page here https://stackoverflow.com/questions)

Answer 1

I think I found the solution that works for me and most likely is what I was supposed to do.

The ellipsis button should not be clickable in the first place, its href='#' is set to correct value.

I styled the button with css to make it unclickable via pointer-events:none, changed cursor to look like its not clickable.

Basically I made the pagination look like and behave like pagination on StackOverflow (check bottom of the page here https://stackoverflow.com/questions)