Login

Bootstrap theme for django-endless-pagination?

Author:
se210
Posted:
January 4, 2016
Language:
HTML/template
Version:
1.7
Score:
0 (after 0 ratings)

An example for using bootstrap theme for django-endless-pagination or django-el-pagination as asked on http://stackoverflow.com/questions/30149152/how-to-set-bootstrap-theme-for-django-endless-pagination

I used django-el-pagination to make it work on Django 1.9 and Bootstrap v4.0.0-alpha2, but same method should work on django-endless-pagination. For Bootstrap 3, you may consider removing extraneous classes in <li> and <a>.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
{% get_pages %}
<ul class="pagination">
{% if pages.paginated %}
  <li class="page-item">
    <a class="page-link" href="{{ pages.first.path }}" aria-label="First">
      <span aria-hidden="true">&lt;&lt;</span>
      <span class="sr-only">First</span>
    </a>
  </li>
  <li class="page-item">
    <a class="page-link" href="{{ pages.previous.path }}" aria-label="Previous">
      <span aria-hidden="true">&lt;</span>
      <span class="sr-only">Previous</span>
    </a>
  </li>
  {% for page in pages %}
    {% if page == None %}
      <li class="page-item disabled">
        <a class="page-link" href="#" aria-label="...">
          <span aria-hidden="true">...</span>
          <span class="sr-only">...</span>
        </a>
      </li>
    {% else %}
      <li class="page-item {% if page.is_current %} active {% endif %}">
        <a class="page-link" href="{{ page.path }}" aria-label="Page {{page.number}}">
          <span aria-hidden="true">{{ page.label|safe }}</span>
          <span class="sr-only">Page {{page.number}}</span>
        </a>
      </li>
    {% endif %}
  {% endfor %}
  <li class="page-item">
    <a class="page-link" href="{{ pages.next.path }}" aria-label="Next">
      <span aria-hidden="true">&gt;</span>
      <span class="sr-only">Next</span>
    </a>
  </li>
  <li class="page-item">
    <a class="page-link" href="{{ pages.last.path }}" aria-label="Last">
      <span aria-hidden="true">&gt;&gt;</span>
      <span class="sr-only">Last</span>
    </a>
  </li>
{% endif %}
</ul>

More like this

  1. Bootstrap Accordian by Netplay4 5 years, 10 months ago
  2. Bootstrap theme for django-endless-pagination? by se210 8 years, 10 months ago
  3. Reusable form template with generic view by roldandvg 8 years, 11 months ago
  4. Pagination Django with Boostrap by guilegarcia 9 years, 1 month ago
  5. django form template with bootstrap by youyongsong 9 years, 10 months ago

Comments

Please login first before commenting.