bayman bayman - 6 months ago 113
Python Question

How to put button on same row as django-bootstrap3 pagination

I am using django-tables2 and django-bootstrap3 to render a table w/ pagination. I'd like to add a button on the same row as the pagination but my Submit button is showing below the pagination. How should I make the button align to the bottom right of the table along the same row as the pagination links?

Here is my table template:

<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>


here is the custom bootstrap3.html from the tables2 app:

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


Here is the rendered output where the button is showing below the pagination instead of on the same row:
enter image description here

Answer

Try to place the table and the button in two adjacent columns:

<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>