django项目中使用bootstrap插件的分页功能。

官网下载bootstrap插件放到项目中的static文件中

路由

path('blog-fullwidth/', login.fullwidth,name='fullwidth'),

前端页面引入

<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">

前端获取数据

{% for v in article_obj %}

    <div class="blog-post">

        <img class="writer pull-left" src="{{ v.member.member_photo }}" alt="用户头像"/>

        <h3><span style="color: #000;">作 者 </span><b>*</b><a

                href="/blog/personage/{{ v.member_id }}"><span>{{ v.member.member_name }}</span></a>

        </h3>

        <strong>{{ v.article_addtime }}</strong>

        <a href="/blog/single-post/{{ v.article_id }}"><h2>{{ v.article_title }}</h2></a>

        <div class="post-img"{% if not v.image.all.first.image_src %} style="display: none"{% endif %}>

            {#                            <a href="{{ v.image.all.last.image_src }}">点击查看图片详情</a>#}

            <a href="{{ v.image.all.last.image_src }}"><img class="img-responsive"

                                                            src="{{ v.image.all.last.image_src }}"

                                                            alt="#"/></a>

        </div>

        {#                            {{ v.image.all.first.image_src }}#}

        <p>{{ v.article_description }}</p>

        <ul class="list-inline read-more">

            <li><a href="/blog/single-post/{{ v.article_id }}" role="button">查看全文</a></li>

            <span>&nbsp;&nbsp;&nbsp;&nbsp;阅读：{{ v.article_clicknum }}&nbsp;&nbsp;</span><a

                href="javascript:;" data-id="{{ v.article_id }}"

                data-num="{{ v.article_praise_num }}"

                class="likes">赞:{{ v.article_praise_num }}

        </a>

            {#                                <li class="pull-right">{{ v.article_comment }}</li>#}

        </ul>

    </div>

{% endfor %}

前端分页写法

<nav aria-label="Page navigation">

    <ul class="pagination">

        {% if article_obj.has_previous %}

            <li class="previous"><a

                    href="/blog/blog-fullwidth/?page={{ article_obj.previous_page_number }}">上一页</a>

            </li>

        {% else %}

            <li class="previous disabled"><a href="#">上一页</a></li>

        {% endif %}

        {% for num in pageRange %}

            <li {% if num == currentPage %}class=" active"{% endif %}><a

                    href="?page={{ num }}">{{ num }}</a></li>

        {% endfor %}

        {% if article_obj.has_next %}

            <li class="next"><a

                    href="/blog/blog-fullwidth/?page={{ article_obj.next_page_number }}">下一页</a></li>

        {% else %}

            <li class="next disabled"><a href="#">下一页</a></li>

        {% endif %}

    </ul>

</nav>

后台写法

# 文章列表页

def fullwidth(request):

    member_id = request.session.get('member_id')

    member_name = request.session.get('member_name')

    super_obj = Article.objects.filter(member_id=7).last()

    # 获取所有文章

    article_obj = Article.objects.filter(article_auditor=0).order_by('-article_addtime')

    currentPage = int(request.GET.get('page', 1))  # 获取当前在第几页

    # book_list = Book.objects.all()

    paginator = Paginator(article_obj, 5)  # 告诉分页器我5条分页

    # 如果总页数大于十一页，设置分页

    if paginator.num_pages > 11:

        # 如果当前页数小于5页

        if currentPage - 5 < 1:

            # 页面上显示的页码

            pageRange = range(1, 11)

        #     如果当前页数+5大于总页数显示的页码

        elif currentPage + 5 > paginator.num_pages:

            pageRange = range(paginator.num_pages - 9, paginator.num_pages + 1)

        else:

            # 在中间显示的十个页码

            pageRange = range(currentPage - 5, currentPage + 5)

    else:

        pageRange = paginator.page_range

    #     捕获路由异常

    try:

        article_obj = paginator.page(currentPage)

    #     如果页码输入不是整数则返回第一页的数据

    except PageNotAnInteger:

        article_obj = paginator.page(1)

    #     如果页码输入是空值则返回第一页数据

    except EmptyPage:

        article_obj = paginator.page(1)

    return render(request, 'blog/blog-fullwidth.html', locals())

页面效果

done。