博客

我们之前已经介绍了如何使用Django 2.0的自带Paginator类可以实现分页功能。但有人跟我抱怨该案例生成的分页效果太丑（如下图所示), 希望我能帮助美化一下。今天我就来分享下一个可以重用的Bootstrap 4分页模板吧，你可以直接用到你的Django 分页项目里，迅速美化你的页面。

改进后的分页效果如下所示, 是不是好多了?

Django Bootstrap 4分页模板代码

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<h3>Django Boostrap 4分页模板</h3>
{# 注释: page_obj不要改。for里的article可以改成自己对象 #}
{% if page_obj %}
    <ul> {% for article in page_obj %}
   <li><a href="{%%20url%20'blog:article_detail'%20article.id%20%}"> {{ article.title }}</a> {{ article.pub_date | date:"Y-m-j" }}</li>
    {% endfor %}
   </ul>

{# 注释: 下面代码一点也不要动 #}
   {% if is_paginated %}
     <ul class="pagination">
    {% if page_obj.has_previous %}
      <li class="page-item"><a class="page-link" href="?page={{%20page_obj.previous_page_number%20}}">Previous</a></li>
    {% else %}
      <li class="page-item disabled"><span class="page-link">Previous</span></li>
    {% endif %}

    {% for i in paginator.page_range %}
        {% if page_obj.number == i %}
      <li class="page-item active"><span class="page-link"> {{ i }} <span class="sr-only">(current)</span></span></li>
       {% else %}
        <li class="page-item"><a class="page-link" href="?page={{%20i%20}}">{{ i }}</a></li>
       {% endif %}
    {% endfor %}

         {% if page_obj.has_next %}
      <li class="page-item"><a class="page-link" href="?page={{%20page_obj.next_page_number%20}}">Next</a></li>
    {% else %}
      <li class="page-item disabled"><span class="page-link">Next</span></li>
    {% endif %}
    </ul>
    {% endif %}

{% else %}
{# 注释: 这里可以换成自己的句子 #}
    <p>No article yet</p>
{% endif %}

视图views.py

之所以说这个模板是可以重用的，是因为其同时支持基于函数方法的视图和Django自带的基于类的视图(CBV)。因为新闻博客为例，下面两种视图都是可以的。你可以稍微改下视图文件views.py即可实现Bootstrap 4分页效果。

from django.views.generic import ListView
from .models import Article
from django.shortcuts import render
from django.core.paginator import Paginator


# Create your views here.
class ArticleListView(ListView):
    queryset = Article.objects.filter(status='p').order_by('-pub_date')
    paginate_by = 3


def article_list(request):
    articles = Article.objects.filter(status='p').order_by('-pub_date')
    paginator = Paginator(articles, 3)
    page = request.GET.get('page')
    page_obj = paginator.get_page(page)

    return render(request, 'blog/article_list.html',
                  {'page_obj': page_obj, 'paginator': paginator, 'is_paginated': True})