英文:
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:
['prev',1,2,3,4,5,'...',18,'next']
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("-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)
答案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)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论