WIP commit for template cleanup

django_tables2/templates/django_tables2/bootstrap.html

@@ -54,21 +54,33 @@
 
     {% if table.page and table.paginator.num_pages > 1 %}
         {% block pagination %}
-        <ul class="pager list-inline">
-            {% if table.page.has_previous %}
-                {% block pagination.previous %}
-                <li class="previous">
-                    <a href="{% querystring table.prefixed_page_field=table.page.previous_page_number %}" class="btn btn-default"><span aria-hidden="true">&larr;</span> {% trans 'previous' %}</a>
-                </li>
-                {% endblock pagination.previous %}
-            {% endif %}
+        <nav aria-label="Table navitgation">
+            <ul class="pagination">
+                {% if table.page.has_previous %}
+                    {% block pagination.previous %}
+                    <li>
+                        <a href="{% querystring table.prefixed_page_field=table.page.previous_page_number %}" class="btn btn-default">
+                            <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.current %}
-                    <li class="cardinality">
-                        <small>{% blocktrans with table.page.number as current and table.paginator.num_pages as total %}Page {{ current }} of {{ total }}{% endblocktrans %}</small>
-                    </li>
-                {% endblock pagination.current %}
+                {% block pagination.range %}
+                    {% for p in table.page|table_page_range:table.paginator %}
+                        <li>
+                            {% if p == '...' %}
+                                <a href="#">{{ p }}</a>
+                            {% else %}
+                                <a href="{% querystring table.prefixed_page_field=p %}" {% if p == table.page %}class="active"{% endif %}>
+                                    {{ p }}
+                                </a>
+                            {% endif %}
+                        </li>
+                    {% endfor %}
+                {% endblock pagination.range %}
             {% endif %}
 
             {% if table.page.has_next %}

django_tables2/templates/django_tables2/bootstrap4.html

@@ -0,0 +1,93 @@
+{% load django_tables2 %}
+{% load i18n %}
+{% block table-wrapper %}
+<div class="table-container">
+    {% block table %}
+        <table {% if table.attrs %} {{ table.attrs.as_html }}{% else %}class="table"{% endif %}>
+            {% block table.thead %}
+            {% if table.show_header %}
+                <thead class="thead-default">
+                <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>
+            {% endif %}
+            {% endblock table.thead %}
+            {% block table.tbody %}
+                <tbody>
+                {% for row in table.page.object_list|default:table.rows %} {# support pagination #}
+                    {% block table.tbody.row %}
+                    <tr scope="row" {{ row.attrs.as_html }}>
+                        {% for column, cell in row.items %}
+                            <td {{ column.attrs.td.as_html }}>{% if column.localize == None %}{{ cell }}{% else %}{% if column.localize %}{{ cell|localize }}{% else %}{{ cell|unlocalize }}{% endif %}{% endif %}</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 %}
+            {% if table.has_footer %}
+            <tfoot>
+                <tr>
+                {% for column in table.columns %}
+                    <td {{ column.attrs.tf.as_html }}>{{ column.footer }}</td>
+                {% endfor %}
+                </tr>
+            </tfoot>
+            {% endif %}
+            {% endblock table.tfoot %}
+        </table>
+    {% endblock table %}
+
+    {% if table.page and table.paginator.num_pages > 1 %}
+        {% block pagination %}
+        <nav aria-label="Table navigation">
+            <ul class="pagination justify-content-center">
+            {% if table.page.has_previous %}
+                {% block pagination.previous %}
+                <li class="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 %}
+
+            {% 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 %}
+
+            {% if table.page.has_next %}
+                {% block pagination.next %}
+                <li class="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>
+        {% endblock pagination %}
+    {% endif %}
+</div>
+{% endblock table-wrapper %}

django_tables2/templates/django_tables2/table.html

@@ -65,14 +65,19 @@
         {% endblock pagination.previous %}
     {% endif %}
 
-    {% if table.page.has_previous or table.page.has_next %}
-        {% block pagination.cardinality %}
-            <li class="cardinality">
-                {% blocktrans with table.page.number as current and table.paginator.num_pages as total %}Page {{ current }} of {{ total }}{% endblocktrans %}
+    {% block pagination.range %}
+        {% for p in table.page|table_page_range:table.paginator %}
+            <li>
+                {% if table.page.number == p or p == '...' %}
+                    {{ p }}
+                {% else %}
+                    <a href="{% querystring table.prefixed_page_field=p %}">
+                        {{ p }}
+                    </a>
+                {% endif %}
             </li>
-        {% endblock pagination.cardinality %}
-    {% endif %}
-
+        {% endfor %}
+    {% endblock pagination.range %}
     {% if table.page.has_next %}
         {% block pagination.next %}
             <li class="next">

django_tables2/templatetags/django_tables2.py

@@ -5,6 +5,7 @@
 from collections import OrderedDict
 
 from django import template
+from django.conf import settings
 from django.core.exceptions import ImproperlyConfigured
 from django.template import Node, TemplateSyntaxError
 from django.template.defaultfilters import title as old_title
@@ -256,3 +257,38 @@ def export_url(context, export_format, export_trigger_param='_export'):
         ?q=blue&_export=csv
     '''
     return QuerystringNode(updates={export_trigger_param: export_format}, removals=[]).render(context)
+
+
+@register.filter
+def table_page_range(page, paginator):
+    '''
+    Given an page and paginator, return a list of max 10 (by default) page numbers:
+     - always containing the first, last and current page.
+     - containing one or two '...' to skip ranges between first/last and current.
+
+    Example:
+        {% for p in table.page|table_page_range:table.paginator %}
+            {{ p }}
+        {% endfor %}
+    '''
+
+    page_range = getattr(settings, 'DJANGO_TABLES2_PAGE_RANGE', 10)
+
+    num_pages = paginator.num_pages
+    if num_pages <= page_range:
+        return range(1, num_pages + 1)
+
+    range_start = page.number - int(page_range / 2)
+    if range_start < 1:
+        range_start = 1
+    range_end = range_start + page_range
+    if range_end >= num_pages:
+        range_start = num_pages - page_range + 1
+        range_end = num_pages + 1
+
+    ret = range(range_start, range_end)
+    if 1 not in ret:
+        ret = [1, '...'] + list(ret)[1:]
+    if num_pages not in ret:
+        ret = list(ret)[:-1] + ['...', num_pages]
+    return ret

example/app/tables.py

@@ -31,6 +31,16 @@ class Meta:
         exclude = ('friendly', )
 
 
+class Bootstrap4Table(tables.Table):
+    country = tables.RelatedLinkColumn()
+
+    class Meta:
+        model = Person
+        template_name = 'django_tables2/bootstrap4.html'
+        attrs = {'class': 'table table-hover'}
+        exclude = ('friendly', )
+
+
 class SemanticTable(tables.Table):
 
     country = tables.RelatedLinkColumn()
@@ -43,6 +53,6 @@ class Meta:
 
 
 class PersonTable(tables.Table):
-
+    pagination_style = 'range'
     class Meta:
         model = Person

example/app/views.py

@@ -5,14 +5,14 @@
 from django.urls import reverse
 from django.utils.lorem_ipsum import words
 from django.views.generic.base import TemplateView
-
 from django_filters.views import FilterView
+
 from django_tables2 import MultiTableMixin, RequestConfig, SingleTableMixin, SingleTableView
 
 from .data import COUNTRIES
 from .filters import PersonFilter
 from .models import Country, Person
-from .tables import BootstrapTable, CountryTable, PersonTable, SemanticTable, ThemedCountryTable
+from .tables import Bootstrap4Table, BootstrapTable, CountryTable, PersonTable, SemanticTable, ThemedCountryTable
 
 
 def create_fake_data():
@@ -22,7 +22,7 @@ def create_fake_data():
             name, population = country.split(';')
             Country.objects.create(name=name, visits=0, population=int(population))
 
-    if Person.objects.all().count() < 50:
+    if Person.objects.all().count() < 500:
         countries = list(Country.objects.all()) + [None]
         Person.objects.bulk_create([
             Person(name=words(3, common=False), country=choice(countries))
@@ -91,6 +91,18 @@ def bootstrap(request):
     })
 
 
+def bootstrap4(request):
+    '''Demonstrate the use of the bootstrap4 template'''
+
+    create_fake_data()
+    table = Bootstrap4Table(Person.objects.all(), order_by='-name')
+    RequestConfig(request, paginate={'per_page': 10}).configure(table)
+
+    return render(request, 'bootstrap4_template.html', {
+        'table': table
+    })
+
+
 def semantic(request):
     '''Demonstrate the use of the Semantic UI template'''
 

example/requirements.txt

@@ -1,5 +1,6 @@
 -e ..
 django-bootstrap3==9.1.0
+django-bootstrap4==0.0.5
 django-debug-toolbar==1.9.1
 django-filter==1.1.0
 tablib<0.11.99

example/settings.py

@@ -122,6 +122,7 @@
 
     'django_filters',
     'bootstrap3',
+    'bootstrap4',
     'django_tables2',
     'debug_toolbar',
 

example/templates/bootstrap4_template.html

@@ -0,0 +1,36 @@
+{% load static %}
+{% load render_table from django_tables2 %}
+{% load bootstrap4 %}
+<!doctype html>
+<html>
+<head>
+    <title>django_tables2 with bootstrap 4 template example</title>
+    {% bootstrap_css %}
+
+</head>
+<body>
+    <div class="container">
+        {% block body %}
+
+        <h3>django_tables2 with <a href="https://getbootstrap.com/docs/4.0/">bootstrap 4</a> template example</h3>
+
+        <a href="https://getbootstrap.com/docs/4.0/content/tables/">Bootstrap 4 - tables docs</a>
+        <a href="https://getbootstrap.com/docs/4.0/components/pagination/">Bootstrap 4 - pagination docs</a>
+
+        <div class="row">
+            {% if filter %}
+                <div class="col-sm-10">
+                    <form action="" method="get" class="form form-inline">
+                        {% bootstrap_form filter.form layout='inline' %}
+                        {% bootstrap_button 'filter' %}
+                    </form>
+                </div>
+            {% endif %}
+            <div class="col-sm-10">
+                {% render_table table %}
+            </div>
+        </div>
+        {% endblock %}
+    </div>
+</body>
+</html>

example/templates/bootstrap_template.html

@@ -4,7 +4,7 @@
 <!doctype html>
 <html>
 <head>
-    <title>django_tables2 with bootstrap template example</title>
+    <title>django_tables2 with bootstrap 3 template example</title>
     {% bootstrap_css %}
 
     <link href="{% static 'django_tables2/bootstrap.css' %}" rel="stylesheet" />
@@ -13,7 +13,10 @@
     <div class="container">
         {% block body %}
 
-        <h3>django_tables2 with bootstrap template example</h3>
+        <h3>django_tables2 with <a href="https://getbootstrap.com/docs/3.3">bootstrap 3</a> template example</h3>
+
+        <a href="https://getbootstrap.com/docs/3.3/css/#tables">Boostrap 3 - table docs</a> <br />
+        <a href="https://getbootstrap.com/docs/3.3/components/#pagination">Boostrap 3 - pagination docs</a> <br />
 
         <div class="row">
             {% if filter %}
@@ -25,7 +28,7 @@ <h3>django_tables2 with bootstrap template example</h3>
                 </div>
             {% endif %}
             <div class="col-sm-10">
-                {% render_table table 'django_tables2/bootstrap.html' %}
+                {% render_table table %}
             </div>
         </div>
         {% endblock %}

example/urls.py

@@ -4,8 +4,8 @@
 from django.contrib import admin
 from django.views import static
 
-from app.views import (ClassBased, FilteredPersonListView, MultipleTables, bootstrap, country_detail, index, multiple,
-                       semantic, tutorial)
+from app.views import (ClassBased, FilteredPersonListView, MultipleTables, bootstrap, bootstrap4, country_detail, index,
+                       multiple, semantic, tutorial)
 
 urlpatterns = [
     url(r'^$', index),
@@ -16,6 +16,7 @@
 
     url(r'^tutorial/$', tutorial, name='tutorial'),
     url(r'^bootstrap/$', bootstrap, name='bootstrap'),
+    url(r'^bootstrap4/$', bootstrap4, name='bootstrap4'),
     url(r'^semantic/$', semantic, name='semantic'),
 
     url(r'^admin/doc/', include('django.contrib.admindocs.urls')),