Bootstrap 4 support for Pagination

Bootstrap 4's Pagination code is backwards compatible with Bootstrap
3's. It adds two new class names (page-item and page-link) and the
option of aligining the pagination bar using a FlexBox utility class
name. So, these options have been added in a way that works for
Bootstrap 3 and 4.

Pager, however, is simply not supported on Bootstrap 4. It will be
nearly 100% unstyled. It may be removed in a future release as a result.

Author: jmcclell

README.md

@@ -113,6 +113,13 @@ Finally, make sure that you have the request context processor enabled:
                          and thus it is expected that there is a named "page" argument in the
                          URL referenced by **url_view_name**. This allows us to use pretty
                          pagination URLs such as "/page/1"
+- *extra_pagination_classes* - A space separated list of CSS class names that
+                             will be added to the top level <ul> HTML element.
+                             In particular, this can be utilized in Bootstrap 4
+                             installations to add the appropriate alignment
+                             classes from Flexbox utilities: eg:
+                             justify-content-center
+                             
 
 **Basic Usage**
 

README.rst

@@ -127,6 +127,12 @@ url_extra_kwargs
   there is a named "page" argument in the URL referenced by **url_view_name**. This allows
   us to use pretty pagination URLs such as "/page/1"
 
+extra_pagination_classes
+  A space separated list of CSS class names that will be added to the top level
+  <ul> HTML element. In particular, this can be utilized in Bootstrap 4
+  installations to add the appropriate alignment classes from Flexbox utilities,
+  eg: justify-content-center
+
 **Basic Usage**
 
 The following will show a pagination bar with a link to every page, a previous link, and a next link:

bootstrap_pagination/templates/bootstrap_pagination/pagination.html

@@ -1,57 +1,57 @@
 {% load bootstrap_pagination %}
-<ul class="pagination{% if size == "small" %} pagination-sm{% endif %}{% if size == "large" %} pagination-lg{% endif %}">
+<ul class="pagination{% if size == "small" %} pagination-sm{% endif %}{% if size == "large" %} pagination-lg{% endif %} {{ extra_pagination_classes }}">
 {% if show_first_last %}
     {% if not page.has_previous %}
-      <li class="disabled">
-        <span aria-hidden="true" title="First Page">{{ first_label }}</span>
+      <li class="page-item disabled">
+        <span class="page-link" aria-hidden="true" title="First Page">{{ first_label }}</span>
       </li>
     {% else %}
-      <li>
-        <a aria-label="First Page" title="First Page" href="{{ first_page_url|default:"#"|escape }}"><span aria-hidden="true">{{first_label}}</span></a>
+      <li class="page-item">
+        <a class="page-link" aria-label="First Page" title="First Page" href="{{ first_page_url|default:"#"|escape }}"><span aria-hidden="true">{{first_label}}</span></a>
       </li>
     {% endif %}
 {% endif %}
 {% if show_prev_next %}
     {% if not page.has_previous %}
-    <li class="disabled">
-        <span aria-hidden="true" title="Previous Page">{{ previous_label }}</span>
+      <li class="page-item disabled">
+        <span class="page-link" aria-hidden="true" title="Previous Page">{{ previous_label }}</span>
       </li>
     {% else %}
-      <li>
-        <a aria-label="Previous Page" title="Previous Page" href="{{ previous_page_url|default:"#"|escape }}"><span aria-hidden="true">{{ previous_label }}</span></a>
+      <li class="page-item">
+        <a class="page-link" aria-label="Previous Page" title="Previous Page" href="{{ previous_page_url|default:"#"|escape }}"><span aria-hidden="true">{{ previous_label }}</span></a>
       </li>
     {% endif %}
 {% endif %}
 {% for pagenum, index_range, url in page_urls %}
     {% if page.number == pagenum %}
-        <li class="active">
-            <span aria-label="Current Page" title="Current Page">{% if show_index_range %} {{ index_range }} {% else %} {{ pagenum }} {% endif %}</span>
+        <li class="page-item active">
+          <span class="page-link" aria-label="Current Page" title="Current Page">{% if show_index_range %} {{ index_range }} {% else %} {{ pagenum }} {% endif %}</span>
         </li>
     {% else %}
-        <li>
-            <a aria-label="Page {{ pagenum }} of {{ page.paginator.num_pages }}" title="Page {{ pagenum }} of {{ page.paginator.num_pages }}" href="{{ url|escape }}">{% if show_index_range %} {{ index_range }} {% else %} {{ pagenum }} {% endif %}</a>
+        <li class="page-item">
+          <a class="page-link" aria-label="Page {{ pagenum }} of {{ page.paginator.num_pages }}" title="Page {{ pagenum }} of {{ page.paginator.num_pages }}" href="{{ url|escape }}">{% if show_index_range %} {{ index_range }} {% else %} {{ pagenum }} {% endif %}</a>
         </li>
     {% endif %}
 {% endfor %}
 {% if show_prev_next %}
     {% if not page.has_next %}
-      <li class="disabled">
-        <span aria-hidden="true" title="Next Page">{{ next_label }}</span>
+      <li class="page-item  disabled">
+        <span class="page-link" aria-hidden="true" title="Next Page">{{ next_label }}</span>
       </li>
     {% else %}
-      <li>
-        <a aria-label="Next Page" title="Next Page" href="{{ next_page_url|default:"#"|escape }}"><span aria-hidden="true">{{ next_label }}</span></a>
+      <li class="page-item">
+        <a class="page-link"  aria-label="Next Page" title="Next Page" href="{{ next_page_url|default:"#"|escape }}"><span aria-hidden="true">{{ next_label }}</span></a>
       </li>
     {% endif %}
 {% endif %}
 {% if show_first_last %}
     {% if not page.has_next %}
-      <li class="disabled">
-        <span aria-hidden="true" title="Last Page" >{{ last_label }}</span>
+      <li class="page-item disabled">
+        <span class="page-link" aria-hidden="true" title="Last Page" >{{ last_label }}</span>
       </li>
     {% else %}
-      <li>
-        <a aria-label="Last Page" title="Last Page" href="{{ last_page_url|default:"#"|escape }}"><span aria-hidden="true">{{last_label}}</span></a>
+      <li class="page-item">
+        <a class="page-link" aria-label="Last Page" title="Last Page" href="{{ last_page_url|default:"#"|escape }}"><span aria-hidden="true">{{last_label}}</span></a>
       </li>
     {% endif %}
 {% endif %}

bootstrap_pagination/templatetags/bootstrap_pagination.py

@@ -201,6 +201,8 @@ def render(self, context):
         url_get_params = kwargs.get("url_get_params", context['request'].GET)
         url_anchor = kwargs.get("url_anchor", None)
 
+        extra_pagination_classes = kwargs.get("extra_pagination_classes", "")
+
         # Generage our viewable page range
         page_count = page.paginator.num_pages
         current_page = page.number
@@ -271,7 +273,8 @@ def render(self, context):
                 'first_page_url': first_page_url,
                 'last_page_url': last_page_url,
                 'previous_page_url': previous_page_url,
-                'next_page_url': next_page_url
+                'next_page_url': next_page_url,
+                'extra_pagination_classes': extra_pagination_classes,
             }))
 
 
@@ -329,8 +332,8 @@ def bootstrap_paginate(parser, token):
                          the URL.
 
         url_extra_args - This is used only in conjunction with url_name.
-                        When referencing a URL, additional arguments may be
-                        passed in as a list.
+                         When referencing a URL, additional arguments may be
+                         passed in as a list.
 
         url_extra_kwargs - This is used only in conjunction with url_name.
                            When referencing a URL, additional named arguments
@@ -341,6 +344,13 @@ def bootstrap_paginate(parser, token):
                          filters.
 
         url_anchor - The anchor to use in URLs. Defaults to None.
+
+        extra_pagination_classes - A space separated list of CSS class names
+                                   that will be added to the top level <ul>
+                                   HTML element. In particular, this can be
+                                   utilized in Bootstrap 4 installatinos  to
+                                   add the appropriate alignment classes from
+                                   Flexbox utilites, eg:  justify-content-center
     """
     bits = token.split_contents()
     if len(bits) < 2:

tests/test_paginate.py

@@ -31,7 +31,7 @@ def test_example(self):
         c = Context({'page_obj': paginator.page(2),
                      'request': django.http.HttpRequest()})
         html = lxml.html.fragment_fromstring(template.render(c))
-        self.assertEqual(html.get('class'), 'pagination')
+        self.assertEqual(html.get('class').strip(), 'pagination')
         self.assertEqual(
             html.cssselect('[title=\"Current Page\"]')[0].text.strip(),
             '2')