当前位置: 首页 > 后台 > Django

Django基于Paginator实现数据分页

作者: admin 2019-08-18 22:03:25 阅读(210) 评论(0)

前言

不论是在后台管理还是在前端列表展示页面,分页功能通常都是必不可少的。Django自带了一个Paginator类,只要通过传递分页参数(每页条数,分页数据,页码)即可实现后端分页。

开始教程之前,我们已经在models.py中写入了一个文章Article实体类。

class Article(models.Model):
    id = models.BigAutoField(primary_key=True)
    title = models.CharField(max_length=64)
    content = models.TextField()
    gmt_created = models.DateTimeField(blank=True, null=True, auto_now_add=True)
    gmt_modified = models.DateTimeField(blank=True, null=True, auto_now=True)

1. 后台分页处理

  • 例如,现在要实现文章列表的分页。应先获取文章列表,然后调用 Paginator,将获取到的文章列表数据传递给 Paginator,当然还有当前页码,以及每页显示条数。views.py具体代码如下。
# 获取所有文章(分页)
def archive_all(request):
    article_list = Article.objects.filter() # 获取文章列表
    paginator = Paginator(article_list, 5)  # 初始化分页对象,每页5条
    page = request.GET.get('page')  # 从GET请求中获取页码
    try:
        page_data = paginator.page(page)  # 根据页码获取分页数据
    except PageNotAnInteger:  # 页码不是数字,跳到第一页
        page_data = paginator.page(1)  
    except EmptyPage:  # 页码超出范围,跳到最后一页
        page_data = paginator.page(paginator.num_pages)  
    context = {'article_list': page_data}  # 封装分页数据
    return render(request, 'blog-archive.html', context)  # 传递分页数据至模板页面
  • 在urls.py中注册该函数以及访问路径。
from django.urls import path
from front import views
urlpatterns = [
    path('archive', views.archive_all, name='archive'),
]

2. 前端初始化分页

  • 在前端调用了一个分页插件,该分页插件的CSS样式下载地址为myPagination.css, JS脚本下载地址为myPagination.js

  • 在页面中载入 myPagination.cssmyPagination.js之后,需要初始化分页容器分页参数

const pagination = new myPagination({
        id: 'pagination', // 分页容器初始化,指定容器的id
        curPage: {{ article_list.number }}, //初始页码
        pageTotal: {{ article_list.paginator.num_pages }}, //总页数
        pageAmount: {{ article_list.paginator.per_page }},  //每页多少条
        dataTotal: {{ article_list.paginator.count }}, //总共多少条数据
        pageSize: 3, //可选,分页个数
        showPageTotalFlag: true, //是否显示数据统计
        //showSkipInputFlag: true, //是否支持跳转#}
        getPage: function (page) {
            window.location.href = "/front/achive?page=" + page;  //单击页码按钮跳转
        }
});
  • 在模板中循环遍历显示文章列表article_list。具体代码如下所示:
<div id="article-holder" style="width: 100%; float: left">
    {% for article in article_list %}
        <div class="article-box">
            <div class="article-detail-box">
                {{ article.content }}
            </div>
        </div>
    {% empty %}
        <div class="article-box">
            <h1>暂无数据</h1>
        </div>
    {% endfor %}
</div>

3. 测试

  • 运行Django项目,在浏览器中输入网址http://127.0.0.1:8000/front/archive进行访问,文章分页成功? 。

  • 点击页码2再进行测试,能正常访问? 。

0 条评论