Django前端BootCSS实现分页的方法

下面我将为大家讲解如何使用Django和Bootstrap实现分页：

1. 引入Bootstrap

首先，我们需要在Django项目中引入Bootstrap框架。在base.html文件（或者其他你想要放置的文件）中添加以下代码：

<!-- 引入Bootstrap -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2. 添加分页组件

接下来，我们需要在模板中添加分页组件。可以使用Bootstrap的分页组件来实现。以下是示例代码：

<div class="col-md-12 text-center">
    <nav aria-label="Page navigation">
        <ul class="pagination">
            {% if page_obj.has_previous %}
                <li>
                    <a href="?page=1" aria-label="First">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li>
                    <a href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                        <span aria-hidden="true">&lt;</span>
                    </a>
                </li>
            {% endif %}

            {% for i in paginator.page_range %}
                {% if page_obj.number == i %}
                    <li class="active"><a href="#">{{ i }} <span class="sr-only">(current)</span></a></li>
                {% elif i > page_obj.number|add:'-3' and i < page_obj.number|add:'3' %}
                    <li><a href="?page={{ i }}">{{ i }}</a></li>
                {% endif %}
            {% endfor %}

            {% if page_obj.has_next %}
                <li>
                    <a href="?page={{ page_obj.next_page_number }}" aria-label="Next">
                        <span aria-hidden="true">&gt;</span>
                    </a>
                </li>
                <li>
                    <a href="?page={{ paginator.num_pages }}" aria-label="Last">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            {% endif %}
        </ul>
    </nav>
</div>

3. 说明

在上面的代码中，我们使用了Bootstrap的分页样式，并且根据当前页码和总页数来动态添加页码按钮。同时，我们也增加了一个判断条件，使得当页码过多时，只显示相邻的几个页码，而不是全部显示。

4. 示例

以下是一个使用上述分页组件的Django视图示例，它使用了Django的Paginator类来分页：

from django.shortcuts import render
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger

def index(request):
    # 获取所有文章
    all_articles = Article.objects.all()

    # 分页
    paginator = Paginator(all_articles, 10) # 每页显示10篇文章
    page = request.GET.get('page')
    try:
        articles = paginator.page(page)
    except PageNotAnInteger:
        # 如果传入的页码不是一个整数，则显示第一页
        articles = paginator.page(1)
    except EmptyPage:
        # 如果页码超出了可用范围，则显示最后一页
        articles = paginator.page(paginator.num_pages)

    return render(request, 'index.html', {'articles': articles})

这个视图将所有文章分成每页10篇，然后根据page参数传入的页码返回对应的分页结果。在模板中，我们只需要使用上述的分页组件就可以动态地显示分页按钮。