Question

我正在使用django-tables2和django-bootstrap3来呈现带有分页的表。我想在分页的同一行添加一个按钮，但我的提交按钮显示在分页下方。如何使按钮与分页链接在同一行的桌子右下方对齐？

这是我的表格模板：

  <div class="row">
    <div class="col-md-12">
      <form method='POST' action='{% url "playlists:add_track" %}'>{% csrf_token %}
        {% render_table table "django_tables2/bootstrap3.html" %}
        <button class="btn btn-primary" type="submit" name="action">Submit</button>
      </form>
    </div>
  </div>

这是来自tables2 app的自定义bootstrap3.html：

{% load querystring from django_tables2 %}
{% load trans blocktrans from i18n %}
{% load bootstrap3 %}

{% if table.page %}
    <div class="table-responsive">
{% endif %}

{% block table %}
    <table{% if table.attrs %} {{ table.attrs.as_html }}{% endif %}>
        {% block table.thead %}
            <thead>
            <tr>
                {% for column in table.columns %}
                    {% if column.orderable %}
                        <th {{ column.attrs.th.as_html }}><a href="{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}">{{ column.header }}</a></th>
                    {% else %}
                        <th {{ column.attrs.th.as_html }}>{{ column.header }}</th>
                    {% endif %}
                {% endfor %}
            </tr>
            </thead>
        {% endblock table.thead %}
        {% block table.tbody %}
            <tbody>
            {% for row in table.page.object_list|default:table.rows %} {# support pagination #}
                {% block table.tbody.row %}
                    <tr class="{% cycle "odd" "even" %}">
                        {% for column, cell in row.items %}
                            <td {{ column.attrs.td.as_html }}>{{ cell }}</td>
                        {% endfor %}
                    </tr>
                {% 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 %}
            </tbody>
        {% endblock table.tbody %}
        {% block table.tfoot %}
            <tfoot></tfoot>
        {% endblock table.tfoot %}
    </table>
{% endblock table %}

{% if table.page %}
    {% block pagination %}
        {% bootstrap_pagination table.page url=request.get_full_path %}
        {#{ table.page|pagination }#}
    {% endblock pagination %}
    </div>
{% endif %}

这是渲染的输出，其中按钮显示在分页下方而不是同一行：

Answer 1

尝试将表格和按钮放在两个相邻的列中：

<div class="row">
  <form method='POST' action='{% url "playlists:add_track" %}'>{% csrf_token %}
    <div class="col-sm-10">
      {% render_table table "django_tables2/bootstrap3.html" %}
    </div>
    <div class="col-sm-2">
      <button class="btn btn-primary" type="submit" name="action">Submit</button>
    </div>
  </form>
</div>

UPD。

表格模板：

<div class="row">
  <div class="col-xs-12">
    <form method='POST' action='{% url "playlists:add_track" %}'>{% csrf_token %}
      {% render_table table "django_tables2/bootstrap3.html" %}
    </form>
  </div>
</div>

bootstrap3.html：

{% load querystring from django_tables2 %}
{% load trans blocktrans from i18n %}
{% load bootstrap3 %}

{% if table.page %}
    <div class="table-responsive">
{% endif %}

{% block table %}
    <table{% if table.attrs %} {{ table.attrs.as_html }}{% endif %}>
        {% block table.thead %}
            <thead>
            <tr>
                {% for column in table.columns %}
                    {% if column.orderable %}
                        <th {{ column.attrs.th.as_html }}><a href="{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}">{{ column.header }}</a></th>
                    {% else %}
                        <th {{ column.attrs.th.as_html }}>{{ column.header }}</th>
                    {% endif %}
                {% endfor %}
            </tr>
            </thead>
        {% endblock table.thead %}
        {% block table.tbody %}
            <tbody>
            {% for row in table.page.object_list|default:table.rows %} {# support pagination #}
                {% block table.tbody.row %}
                    <tr class="{% cycle "odd" "even" %}">
                        {% for column, cell in row.items %}
                            <td {{ column.attrs.td.as_html }}>{{ cell }}</td>
                        {% endfor %}
                    </tr>
                {% 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 %}
            </tbody>
        {% endblock table.tbody %}
        {% block table.tfoot %}
            <tfoot></tfoot>
        {% endblock table.tfoot %}
    </table>
{% endblock table %}

{% if table.page %}
    </div>

    <div class="row">
        <div class="col-sm-10">
            {% block pagination %}
                {% bootstrap_pagination table.page url=request.get_full_path %}
                {#{ table.page|pagination }#}
            {% endblock pagination %}
        </div>
        <div class="col-sm-2">
{% endif %}

            <button class="btn btn-primary" type="submit" name="action">Submit</button>

{% if table.page %}
        </div>
    </div>
{% endif %}

如何将按钮放在与django-bootstrap3分页相同的行上

1 个答案: