如何使Django-tables2中的省略分页功能生效

huangapple go评论62阅读模式
英文:

How to make elided pagination work in django-tables2

问题

我正在尝试使用django-tables2 v2.5.2来呈现产品表格。

分页呈现得很正确,基本上是这样的:

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

每个按钮都是<a>标签,带有href='?page=x',单击后会更新URL的页面参数,但省略号按钮('...')的href='#',显然在单击时不起作用。其他页面按钮正常工作。

您有没有任何关于如何设置django和/或django-tables2以使省略分页工作的想法?

我正在尝试使用产品创建一个简单的表格。我正在使用函数视图和RequestConfig,像这样:

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和django框架的文档,但我认为我必须漏掉了某些内容。

我期望省略号按钮在分页中加载缺少的页面范围,因此我认为它的href需要设置为不是'#'

编辑:

我认为我找到了适合我的解决方案,很可能是我应该做的事情。

省略号按钮本来就不应该是可点击的,它的href='#'已经设置为正确的值。

我使用CSS样式了按钮,使其不可点击(pointer-events:none),并更改了光标以使其看起来像不可点击。

基本上,我使分页看起来和行为像StackOverflow上的分页(在此处查看页面底部 https://stackoverflow.com/questions)。

英文:

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

Pagination renders correctly, it basically looks like:

[&#39;prev&#39;,1,2,3,4,5,&#39;...&#39;,18,&#39;next&#39;]

each button is <a> 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(&quot;-publish_date&quot;)
    product_filter = ProductFilter(request.GET, queryset=all_items)
    table = ProductTable(product_filter.qs)
    RequestConfig(request, paginate={&quot;per_page&quot;: 5}).configure(table)
    return render(
        request, &quot;product/product_list.html&quot;, {&quot;table&quot;: table, &quot;filter&quot;: product_filter}
    )

and my tables.py code looks like this:

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

    class Meta:
        model = Product
        template_name = &quot;django_tables2/bootstrap.html&quot;
        sequence = (&quot;title&quot;, &quot;producer&quot;, &quot;user&quot;, &quot;status&quot;, &quot;publish_date&quot;, &quot;image_url&quot;)
        exclude = (&quot;id&quot;, &quot;image_url&quot;)
        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)

答案1

得分: 0

我认为我找到了对我来说最有效的解决方案,而且很可能是我本应该做的事情。

省略按钮首先不应该是可点击的,它的href属性设置为正确的值。

我使用CSS样式对按钮进行了处理,通过pointer-events:none使其不可点击,并将光标更改为看起来不可点击的样式。

基本上,我让分页看起来和行为上像StackOverflow上的分页(请查看页面底部https://stackoverflow.com/questions)一样。

英文:

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)

huangapple
  • 本文由 发表于 2023年2月18日 20:02:40
  • 转载请务必保留本文链接:https://go.coder-hub.com/75493209.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定