Is it possible to custom django-tables2 template f

问题:

I'm using django-tables2 to render my data in tables in the template.. everything is rendered fine with pagination..

The Designer of our company wants to change the Display of data into blocks instead of simple table. the following picture may explain more.

I Want to ask if I can use Django tables2 in this case ..since I don't want to loose the pagination

Is it possible to custom the django_tables2/table.html file to only fit this case (because I'm using django-tables2 in many other pages in the project)?

Any other ideas may be helpful.

Thanks in advance :)

回答1:

Yes, you can create a custom template (based on django_tables2/table.html) and set a specific table's template Meta attribute to its path:

import django_tables2 as tables

class Table(tables.Table):
    # columns

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

or use the template argument to the Table constructor:

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

or use the second argument of the {% render_table %} templatetag:

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

回答2:

I was having the same requirement and i had been able to do it. To achieve the desired results i have used bootstrap4 and modified the "django_tables2/bootstrap4.html" template. My modified template only displays blocks which can further be enhanced by embedding more css in it.

{% 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 %}