Django分页基本思路

Myth丶恋晨 2022-02-22 03:15 210阅读 0赞

# 1、分页规律 #

<table> 
 <tbody> 
  <tr> 
   <td>页码</td> 
   <td>每页条数</td> 
   <td>每页数据</td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td>10</td> 
   <td>0-10</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>10</td> 
   <td>10-20</td> 
  </tr> 
  <tr> 
   <td>n</td> 
   <td>10</td> 
   <td>(n-1)*pageSize-n*pageSize</td> 
  </tr> 
 </tbody> 
</table>

# 2.django基本分页实例 #

首先是视图views.py文件

def list_students(request):
        if request.method == "GET":
            page = request.GET.get("page") #获取页码
            page_size = request.GET.get("page_size") #获取每页条数
            if not page: #设置默认页码为1
                page = 1
            if not page_size: #设置默认每页5
                page_size = 5
            page = int(page) #防止url直接传过来字符串的页码
            page_size = int(page_size) #防止url直接传过来字符串的页码
            start = (page-1)*page_size #页码数据开头的索引
            end = page*page_size  #页码数据结尾的索引
        students = Student.objects.order_by("id") #排序查询
        lenth = len(students) #获取长度
        page_num = lenth/page_size #计算页码范围
        if page_num != int(page_num): #判断页码是否为整数
            page_num += 1
        page_num = int(page_num)
        page_range = range(1,page_num+1) #页码范围
        data = students[start:end] #截取数据
        return render(request,"stu_list.html",{“data”:data,”page_range”:page_range})

配置对应的路由文件

from Student.views import list_student
    urlpatterns+=[
        path('list_student/',list_students),
     
    ]

前端界面 stu\_list.html

加载static，把相关的图片，将其他文件路径都改过来

![20190408105629589.png][]

![20190408105651967.png][]

把表格里面的数据循环输出

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dfb3B0aW1pc3RpYw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dfb3B0aW1pc3RpYw_size_16_color_FFFFFF_t_70 1][]

完善一下前端的页面

<ul class="pagination">
        <li class="paginate_button page-item active"><a href="/stu_list/?page={
       { page|add:-1 }}" class="page-link">上一页</a></li>
            {% for page in page_range %}
                <li class="paginate_button page-item active"><a href="/stu_list/?page={
       { page }}" class="page-link">{
       { page }}</a></li>
            {% endfor %}
            <li class="paginate_button page-item active"><a href="/stu_list/?page={
       { page|add:1 }}" class="page-link">下一页</a></li>
    </ul>

向数据库内添加数据，可以通过views.py文件循环插入100条水库

import random
    def register_student_text(request):
        for i in range(100):
            name = '张%s'%i,
            age = 18
            gender = random.choice(['男','女'])
            classes = random.randint(1000,2000)
            grade = random.choice(["python","java","c","php","linux"])
    
    
            s = Students()
            s.name = name
            s.age = age
            s.gender = gender
            s.classes = classes
            s.grade = grade
    
            s.save()
        return render(request,'register_student.html',locals())

不要忘记添加路由

from Student.views import list_student
    urlpatterns+=[
        path('list_student/',list_students),
        path('reg_stu_text/',register_student_text),
         
    ]

开启项目，浏览器输入 127.0.0.0:8000/reg\_stu\_text/

打开数据库，数据成功插入

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70][]

最后显示网页数据：

输入 127.0.0.0;8000/list\_student/

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70 1][]

[20190408105629589.png]: /images/20220222/72d394bd43684aa79d5f13fd3c2fd628.png
[20190408105651967.png]: /images/20220222/ab191a9e763a483695dfd3318052ee62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dfb3B0aW1pc3RpYw_size_16_color_FFFFFF_t_70]: /images/20220222/c90a94460d96468da79200e7c05096e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dfb3B0aW1pc3RpYw_size_16_color_FFFFFF_t_70 1]: /images/20220222/76280b68f17b42a59e6294fd7005719c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70]: /images/20220222/7c8b9d617fe74df7b1d0d7aa982a403f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70 1]: /images/20220222/6a9ad226c6234fa6a193a9f1953ebe4c.png