分页实战_生成页码号-【官方】百战程序员_IT在线教育培训机构


xxxxxxxxxx
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'paginator_study ',
        'USER': 'root',
        'PASSWORD': '123',
        'HOST': '127.0.0.1',
        'PORT': 3306,
    }
}

建立模型：


xxxxxxxxxx
class Student(models.Model):
    name = models.CharField(max_length=20)
    age = models.IntegerField()
    sex = models.IntegerField(choices=((1, '男'), (2, '女')), default=1)
    card_no = models.CharField(max_length=18)

迁移数据库


xxxxxxxxxx
python manage.py makemigrations
python manage.py migrate paginator_app

生成测试数据

model中增加批量插入测试数据的方法：


xxxxxxxxxx
@classmethod
def insert_test_data(cls, num=100):
    def random_str(raw_ite, length):
        return ''.join(random.choices(raw_ite, k=length))

    obj_list = []
    for _ in range(num):
        obj_list.append(Student(
            name=random_str(string.ascii_lowercase, 8),
            age=random.randint(18, 50),
            sex=random.choice([1, 2]),
            card_no=random_str(string.digits, 18)
        ))

    Student.objects.bulk_create(obj_list)

然后在 python manage.py shell 中调用该方法


xxxxxxxxxx
$ python manage.py shell
$ from paginator_app.models import *
$ Student.insert_test_data()

数据的基本显示

urls增加路由配置


xxxxxxxxxx
from django.urls import path

from .views import index

urlpatterns =[
    path('students/',index,name= 'stu')
]

views中实现函数


xxxxxxxxxx
from django.shortcuts import render

from .models import Student
# Create your views here.
def index(request):
    # 获取数据
    student_list = Student.objects.all()
    # 将数据和模板一起返回
    return render(request,'student.html',{'student_list':student_list})

页面显示


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>学生列表</h3>
    <table>
        <th>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>身份证号</td>
        </th>
        {% for stu in student_list %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ stu.name }}</td>
                <td>{{ stu.sex }}</td>
                <td>{{ stu.age }}</td>
                <td>{{ stu.card_no }}</td>
            </tr>
        {% endfor %}
    </table>

</body>
</html>

编写样式 static>>css>>paginator.css


xxxxxxxxxx
table
{
    border-collapse: collapse;
    text-align: center;
}

table td, table th
{
    border: 1px solid #cad9ea;
    color: #666;
    height: 35px;
}

table thead th
{
    background-color: #CCE8EB;
    width: 100px;
}

table tr:nth-child(odd)
{
    background: #fff;
}

table tr:nth-child(even)
{
    background: #F5FAFA;
}

加载静态文件


xxxxxxxxxx
{% load static %}
<link rel="stylesheet" href="{% static 'css/paginator.css' %}">

使用分页器

修改返回数据


xxxxxxxxxx
from django.core.paginator import Paginator
from django.conf import settings

def index_page(request):
    # 获取要页面码
    page = request.GET.get('page')
    # 获取数据
    student_list = Student.objects.all().order_by('age')
    # 初始化分页器
    pageinator = Paginator(student_list,settings.PAGE_SIZE)
    # 获取指定页码的数据
    students_page = pageinator.get_page(page)
    # 返回数据
    return render(request,'student_page.html',{'student_list':students_page})

增加分页栏


xxxxxxxxxx
<nav>
        <ul>
            <li><a href="?page=1">首页</a></li>
            {% if student_list.has_previous %} 
                <li><a href="?page={{student_list.previous_page_number}}">上一页</li>
            {% endif %}
            {% if student_list.has_next %} 
                <li><a href="?page={{student_list.next_page_number}}">下一页</li>
            {% endif %}
            <li><a href="?page={{student_list.paginator.num_pages}}">末页</a></li>
        </ul>
</nav>

设置样式


xxxxxxxxxx
ul,li{ padding:0; margin:0;list-style:none}
.nav{border:1px solid #000; width:510px; overflow:hidden}
.nav li{ line-height:22px; float:left; padding:0 5px;}
.nav li a:hover{ color:#F00}
nav li{line-height:22px; float:left; padding:0 6px;}
nav li a{ color:#009900}

优化页码

不显示全部页码，自定义处理函数


xxxxxxxxxx
def get_page_range(page,max_page,num=4):
    '''
    page:当前页码码
    max_page:总页数多少
    num:设置当前页码前后各多少个数字
    '''
    # 根据当前页生成前面数字
    min = int(page)-num
    # 设置最小的页码码，如果这个页码码，小于1，则设置为1
    min= min if min > 1 else 1

    # 根据当前页生成后面数字
    max = int(page) + num -1
    # 设置最大的页码号，如果这个号操作总页数，则设置最大号码
    max = max if max < max_page else max_page
  
    # 返回数字序列
    return range(min,max+1)

提取共同页面 paginator_common.html


xxxxxxxxxx
<nav>
    <ul>
        <li><a href="?page=1">首页</a></li>
        {% if data_list.has_previous %} 
            <li><a href="?page={{data_list.previous_page_number}}">上一页</li>
        {% endif %}

        {% for num in page_range %}
                {% if num == data_list.number %} 
                    <li><strong>{{num}}</strong></li>
                {% else %}
                    <li><a href="?page={{num}}">{{num}}</li>
                {% endif %}
        {% endfor %}
        {% if data_list.has_next %} 
            <li><a href="?page={{data_list.next_page_number}}">下一页</li>
        {% endif %}
        <li><a href="?page={{data_list.paginator.num_pages}}">末页</a></li>
    </ul>
</nav>

引入共同页面


xxxxxxxxxx
{% if data_list.object_list %}
    {% include 'page_comment.html' %}
{% endif %}

注意
在 page_comment.html 中使用的 data_list和page_range需要统一命名，否则会报错

分页实战_实现翻页效果分页实战_提取分页工具模板

北京市昌平区回龙观镇南店村综合商业楼2楼226室