在这种情况下，是否可以为特定页面自定义 django-tables2 模板？

Question

我正在使用 django-tables2 在模板中的表格中呈现我的数据.. 分页显示一切都很好..

我们公司的设计师想要将数据的显示改为块而不是简单的表格。下面的图片可能会解释更多。

我想问在这种情况下我是否可以使用 Django tables2 ..因为我不想松开分页

是否可以自定义 django_tables2/table.html 文件以仅适合这种情况（因为我在项目的许多其他页面中使用 django-tables2）？

任何其他想法可能会有所帮助。

提前致谢:)

Answer 1

是的，您可以创建自定义模板（基于django_tables2/table.html）并将特定表格的模板元属性设置为其路径：

import django_tables2 as tables

class Table(tables.Table):
    # columns

    class Meta:
        template = 'table-blocks.html'

或将template 参数用于Table 构造函数：

table = Table(queryset, template='table-blocks.html')

或者使用{% render_table %}模板标签的第二个参数：

{% load django_tables2 %}
{% render_table queryset 'table-blocks.html' %}

Answer 2

我有同样的要求，我已经能够做到。为了达到预期的效果，我使用了 bootstrap4 并修改了“django_tables2/bootstrap4.html”模板。我修改后的模板只显示可以通过在其中嵌入更多 css 来进一步增强的块。

{% load django_tables2 %}
{% load i18n %}
{% block table-wrapper %}
    <div class="container-fluid relative animatedParent animateOnce p-0" >
        {% block table %}

            {% block table.tbody %}
                <div class="row no-gutters">
                    <div class="col-md-12">
                        <div class="pl-3 pr-3 my-3">
                            <div class="row">
                                {% for row in table.paginated_rows %}

                                    {% block table.tbody.row %}
                                        <div class="col-md-6 col-lg-3 my-3">
                                            <div class="card r-0 no-b shadow2">
                                                {% for column, cell in row.items %}
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <div class="card-body text-center p-5">
                                                            {% if column.localize == None %}{{ cell }}{% else %}{% if column.localize %}{{ cell|localize }}{% else %}{{ cell|unlocalize }}{% endif %}{% endif %}
                                                        </div>
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    {% endblock table.tbody.row %}
                                {% empty %}
                                    {% if table.empty_text %}
                                        {% block table.tbody.empty_text %}
                                            <tr><td colspan="{{ table.columns|length }}">{{ table.empty_text }}</td></tr>
                                        {% endblock table.tbody.empty_text %}
                                    {% endif %}

                                {% endfor %}
                            </div></div></div> </div>
            {% endblock table.tbody %}



            {% block table.tfoot %}
                {% if table.has_footer %}
                    <tfoot {{ table.attrs.tfoot.as_html }}>
                    <tr>
                        {% for column in table.columns %}
                            <td {{ column.attrs.tf.as_html }}>{{ column.footer }}</td>
                        {% endfor %}
                    </tr>
                    </tfoot>
                {% endif %}
            {% endblock table.tfoot %}
        {% endblock table %}
</div>
        {% block pagination %}
            {% if table.page and table.paginator.num_pages > 1 %}
                <nav aria-label="Table navigation">
                    <ul class="pagination justify-content-center">
                        {% if table.page.has_previous %}
                            {% block pagination.previous %}
                                <li class="previous page-item">
                                    <a href="{% querystring table.prefixed_page_field=table.page.previous_page_number %}" class="page-link">
                                        <span aria-hidden="true">&laquo;</span>
                                        {% trans 'previous' %}
                                    </a>
                                </li>
                            {% endblock pagination.previous %}
                        {% endif %}
                        {% if table.page.has_previous or table.page.has_next %}
                            {% block pagination.range %}
                                {% for p in table.page|table_page_range:table.paginator %}
                                    <li class="page-item{% if table.page.number == p %} active{% endif %}">
                                        <a class="page-link" {% if p != '...' %}href="{% querystring table.prefixed_page_field=p %}"{% endif %}>
                                            {{ p }}
                                        </a>
                                    </li>
                                {% endfor %}
                            {% endblock pagination.range %}
                        {% endif %}
                        {% if table.page.has_next %}
                            {% block pagination.next %}
                                <li class="next page-item">
                                    <a href="{% querystring table.prefixed_page_field=table.page.next_page_number %}" class="page-link">
                                        {% trans 'next' %}
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            {% endblock pagination.next %}
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        {% endblock pagination %}
{% endblock table-wrapper %}