结合Bootstrap在Django中实现分页（非常详细并且完整的教程，适合新手，附代码，windows平台下开发）

1. 目标

最终的分页效果会根据实际的内容条目数量自适应的显示，效果图如下：

下面进入具体的开发步骤。

2.安装环境

本教程采用Bootstrap作为前端框架，采用该前端框架可以极大的减少前端代码开发量。本文重点讲解利用Bootstrap提供的分页组件实现分页效果。

安装python：本示例采用Python3.6.1进行开发，因此需要先装好Python3，开发平台为Windows。Python3的安装教程可以参考博客 https://blog.****.net/qianbin3200896/article/details/81098498
安装django：本示例django版本为1.11.14，在终端cmd中输入命令：
```
pip install django==1.11.14
```
即可完成安装。

3.创建项目

在终端cmd中输入命令：

django-admin startproject paginatorDemo

创建一个名为paginatorDemo的项目。通过cd命令定位到paginatorDemo根目录下（与manage.py同目录），输入命令：

python manage.py startapp app

创建一个名为app的应用。在配置文件夹paginatorDemo下的settings.py文件中找到INSTALLED_APPS字段，将创建的app应用添加到项目中：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app',#将应用添加进来
]

在该文件末尾添加静态文件路径（为了在django中正确引用静态资源文件）：

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

在项目根目录下创建一个名为static的文件夹，该文件夹用来存放静态配置文件（本文主要是Bootstrap的配置文件）。

接下来需要下载Bootstrap对应的配置文件并放置于刚才创建的static文件夹内。Bootstrap下载网址为：https://v3.bootcss.com/getting-started/#download

如图所示：结合Bootstrap在Django中实现分页（非常详细并且完整的教程，适合新手，附代码，windows平台下开发）

单击“下载源码”按钮开始下载。下载完成后解压，找到其中的dist文件夹，该文件夹中包含三个子文件夹：css、fonts和js。上述三个子文件夹包含了一些css和js文件，这些文件即为所需的Bootstrap框架的基本配置文件，其中已经封装好了大量Web开发可直接调用的组件和字体库。另外，为了在页面中能够实现分页的动作，还需要导入jquery组件，可以从外部引入该组件，也可以本地引入，这里推荐本地引用方式。从Bootstrap官网的案例上可以找到当前版本的jquery引用网址：https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js。打开该网址然后同时按住ctrl+s键进行保存，保存为jquery.min.js文件。由于是js文件，因此将该文件统一的放置在刚才下载的dist文件夹下的js文件目录中。最后，将dist文件夹下的所有文件夹（js，css，fonts）全部拷贝到刚才创建的paginatorDemo根目录下的static文件夹中。

接下来我们需要为项目导入一些数据用于分页显示，我们以“文章”模型为例，在app应用的models.py文件中创建一个名为Article的类，类中包含姓名name和内容mycontent，具体代码为：

from django.db import models

# Create your models here.
class Article(models.Model):
    name = models.CharField(max_length=30)
    mycontent = models.TextField()

在终端cmd中输入命令：

python manage.py makemigrations

制作好数据库迁移文件，然后输入命令：

python manage.py migrate

正式将刚才创建的模型迁移到数据库中。接下来我们需要借助django提供的后台管理平台向模型中添加一些数据。首先在终端中输入命令：

python manage.py createsuperuser

开始创建管理员账户，根据提示依次输入账户名、邮箱和密码（密码需要输入两遍）。创建完成后输入命令：

python manage.py runserver

启动项目，在浏览器中输入：127.0.0.1:8000/admin。进入后台管理界面，然后输入刚才创建的用户名和密码即可登入。这时候会发现当前管理界面中并没有Article对应的项目可供操作，这是因为我们只是将Article同步到数据库，单还没有将模型注册到管理账户中。打开app应用下的admin.py文件，进行模型注册，完整代码如下：

from django.contrib import admin

# Register your models here.
from .models import Article
class ArticleAdmin(admin.ModelAdmin):
    list_display = ['name','mycontent',]
admin.site.register(Article, ArticleAdmin)

保存后刷新网页，此时为在管理平台中会出现Article模型，如下图所示：

结合Bootstrap在Django中实现分页（非常详细并且完整的教程，适合新手，附代码，windows平台下开发）

单击add按钮逐个添加（填入name和mycontent然后单击save按钮即可）。为了方便后面演示分页效果，在这里添加15条栏目。

到这里，已经完成了Bootstrap文件的配置以及准备好了分页的数据。

4.后端开发

接下来打开配置文件夹paginatorDemo下的urls.py文件，为访问网址添加路由，完整代码如下：

from django.conf.urls import url
from django.contrib import admin
from app.views import home
from django.conf.urls import include
urlpatterns = [
    #管理员
    url(r'^admin/', admin.site.urls),
    #首页
    url(r'^$', home, name='home'), 
]

上述配置将项目访问根网址与app应用下views.py文件中的home处理函数进行绑定。接下来编辑app应用下的views.py文件，添加对应的视图处理函数，完整代码如下：

from django.shortcuts import render
from django.core.paginator import Paginator
from .models import Article

# Create your views here.
def home(request):
    articles = Article.objects.all() #导入的Article模型
    p = Paginator(articles,3)   #分页，3篇文章一页
    if p.num_pages <= 1:  #如果文章不足一页
        article_list = articles  #直接返回所有文章
        data = ''  #不需要分页按钮
    else:
        page = int(request.GET.get('page',1))  #获取请求的文章页码，默认为第一页
        article_list = p.page(page) #返回指定页码的页面
        left = []  # 当前页左边连续的页码号，初始值为空
        right = []  # 当前页右边连续的页码号，初始值为空
        left_has_more = False  # 标示第 1 页页码后是否需要显示省略号
        right_has_more = False  # 标示最后一页页码前是否需要显示省略号
        first = False   # 标示是否需要显示第 1 页的页码号。
        # 因为如果当前页左边的连续页码号中已经含有第 1 页的页码号，此时就无需再显示第 1 页的页码号，
        # 其它情况下第一页的页码是始终需要显示的。
        # 初始值为 False
        last = False  # 标示是否需要显示最后一页的页码号。
        total_pages = p.num_pages  
        page_range = p.page_range  
        if page == 1:  #如果请求第1页
            right = page_range[page:page+2]  #获取右边连续号码页
            print(total_pages)
            if right[-1] < total_pages - 1:    # 如果最右边的页码号比最后一页的页码号减去 1 还要小，
            # 说明最右边的页码号和最后一页的页码号之间还有其它页码，因此需要显示省略号，通过 right_has_more 来指示。
                right_has_more = True
            if right[-1] < total_pages:   # 如果最右边的页码号比最后一页的页码号小，说明当前页右边的连续页码号中不包含最后一页的页码
            # 所以需要显示最后一页的页码号，通过 last 来指示
                last = True
        elif page == total_pages:  #如果请求最后一页
            left = page_range[(page-3) if (page-3) > 0 else 0:page-1]  #获取左边连续号码页
            if left[0] > 2:
                left_has_more = True  #如果最左边的号码比2还要大，说明其与第一页之间还有其他页码，因此需要显示省略号，通过 left_has_more 来指示
            if left[0] > 1: #如果最左边的页码比1要大，则要显示第一页，否则第一页已经被包含在其中
                first = True
        else:  #如果请求的页码既不是第一页也不是最后一页
            left = page_range[(page-3) if (page-3) > 0 else 0:page-1]   #获取左边连续号码页
            right = page_range[page:page+2] #获取右边连续号码页
            if left[0] > 2:
                left_has_more = True
            if left[0] > 1:
                first = True
            if right[-1] < total_pages - 1:
                right_has_more = True
            if right[-1] < total_pages:
                last = True
        data = {    #将数据包含在data字典中
            'left':left,
            'right':right,
            'left_has_more':left_has_more,
            'right_has_more':right_has_more,
            'first':first,
            'last':last,
            'total_pages':total_pages,
            'page':page
        }
    return render(request,'index.html',context={
        'article_list':article_list,'data':data
    })

上述网址主要从数据库中取出所有Article实例，然后采用django提供的Paginator分页工具进行分页，最后将结果传入index.html并且返回给浏览器。在app文件夹下创建一个名为templates的文件夹，然后在templates文件夹下创建一个index.html用来生成页面内容。编辑index.html，完整代码如下：

{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>分页示例demo</title>
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
    <link href="{% static 'css/style.css' %}" rel="stylesheet">

    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>

<body>

    {% for article in article_list %}
    <h4>{{ article.name }}</h4>
    <p>{{ article.mycontent }}</p>
    </br>
    {% endfor %}


    {% if data %}
    <ul id="pages" class="pagination pagination-sm pagination-xs">
        {% if data.first %}
        <li><a href="?page=1">1</a></li>
        {% endif %}
        {% if data.left %}
        {% if data.left_has_more %}
        <li><span>...</span></li>
        {% endif %}
        {% for i in data.left %}
        <li><a href="?page={{i}}">{{i}}</a></li>
        {% endfor %}
        {% endif %}
        <li class="active"><a href="?page={{data.page}}">{{data.page}}</a></li>
        {% if data.right %}
        {% for i in data.right %}
        <li><a href="?page={{i}}">{{i}}</a></li>
        {% endfor %}
        {% if data.right_has_more %}
        <li><span>...</span></li>
        {% endif %}
        {% endif %}
        {% if data.last %}
        <li><a href="?page={{data.total_pages}}">{{data.total_pages}}</a></li>
        {% endif %}
    </ul>
    {% endif %}


</body>

<script>

</script>

</html>

上述代码在<head>部分导入了bootstrap的配置文件（这里注意django中静态配置文件的导入方法）。在<body>部分，首先将内容通过django模板标签逐条显示。在最后，显示分页控件。具体操作结合django后端实现读者可以再细细揣摩。

启动项目，浏览器访问127.0.0.1:8000查看效果。

最后给出完整的代码下载链接：https://download.****.net/download/qianbin3200896/10946371

结合Bootstrap在Django中实现分页（非常详细并且完整的教程，适合新手，附代码，windows平台下开发）

1. 目标

2.安装环境

3.创建项目

4.后端开发

相关推荐