django项目一 分页器(前端分页和后端分页区别)

1. 客户信息展示
　　1. 母版和继承
　　　　{% extends 'layout'%}
　　　　{% load static%}
　　　　{% static '文件路径' %}
　　　　block css js content

　　2. 内容显示
　　　　普通字段 {{ customer.qq }}
　　　　choices {{ customer.get_class_type_display }}
　　　　多对多 定义方法 返回字符串
　　　　显示状态 定义方法 返回HTML代码段 mark_safe


2. 分页
from django.utils.safestring import mark_safe # 字符串不进行转义
from django.utils.html import format_html

前端分页和后端分页

前端分页一般用于数据量较小的情况，一次请求把数据全部从后端请求回来

后端分页适用于数据量偏大时的情况，减小请求传输压力

前端分页

前端分页一般用于数据量较小的情况，一次请求把数据全部从后端请求回来。下面是vue-element-ui的分页组件写法：

需要注意的是：

当前页展示的数据与总数据的关系

let show = this.contactsInfo.slice(this.sizePerPage * (this.activePage - 1), this.sizePerPage * (this.activePage));

当每页条数改变时，当前页设置为首页。防止每页条数变大时，当前页时不存在的页数。

后端分页

后端分页适用于数据量偏大时的情况，减小请求传输压力。前端需要将每页条数和当前页传给后端，后端根据条件查询出数据再传给前端，包括总条数、当前页、每页多少条数据等。

前端显示的当前页和每页多少条数据由后端传回的数据决定，否则出现改变前端参数，还未发请求时，页码的错乱。

当改变每页多少条时，当前页参数置为首页。

template包中建立pagination.py 

class Pagination:

    def __init__(self, page, all_count, per_num=3, max_show=11):
        try:
            page = int(page)
            if page <= 0:
                page = 1
        except Exception as e:
            page = 1
        self.page = page
        self.all_count = all_count
        self.per_num = per_num
        self.max_show = max_show
        # 总页码数
        self.page_num, more = divmod(all_count, per_num)
        if more:
            self.page_num += 1
        # 最多显示页码数
        half_show = max_show // 2

        if self.page_num < max_show:
            # 总页码数不够 最大显示页码数
            self.page_start = 1
            self.page_end = self.page_num
        else:
            # 能显示超过最大显示页码数
            if page <= half_show:
                # 处理左边的极值
                self.page_start = 1
                self.page_end = max_show
            elif page + half_show > self.page_num:
                # 处理右边的极值
                self.page_start = self.page_num - max_show + 1
                self.page_end = self.page_num
            else:
                # 正常的情况
                self.page_start = page - half_show
                self.page_end = page + half_show

    @property
    def start(self):
        return (self.page - 1) * self.per_num

    @property
    def end(self):
        return self.page * self.per_num

    @property
    def page_html(self):
        li_list = []
        if self.page == 1:
            li_list.append('<li class="disabled" ><a> << </a></li>')
        else:
            li_list.append('<li ><a href="?page={}"> << </a></li>'.format(self.page - 1))

        for i in range(self.page_start, self.page_end + 1):
            if self.page == i:
                li_list.append('<li class="active"><a href="?page={}">{}</a></li>'.format(i, i))
            else:
                li_list.append('<li><a href="?page={}">{}</a></li>'.format(i, i))

        if self.page == self.page_num:
            li_list.append('<li class="disabled" ><a> >> </a></li>')
        else:
            li_list.append('<li ><a href="?page={}"> >> </a></li>'.format(self.page + 1))

        return ''.join(li_list)

views文件中

from django.shortcuts import render

from CRM import models
from CRM.tools.pagination import Pagination


def customer_list(request):
    # 从数据库中拿取客户对象
    customer_obj = models.Customer.objects.all()
    # print(len(customer_obj))

    # 实例化分页器的类, 传入参数: 1: 当前页 2: 对象数量 3: 每页展示条数 4: 显示页面个数
    pager = Pagination(request.GET.get('page', '1'), len(customer_obj), per_num=2, max_show=3)
    print(pager.page_end)
    return render(request, 'customer_list.html', {
        "customer_obj": customer_obj[pager.start:pager.end],
        'page_html': pager.page_html,
        'last_page': pager.page_num}
                  )

HTML中 包含首页,尾页

<nav aria-label="Page navigation" style="text-align: center">
        <button style="
        border: none;
        border-radius:4px;
        padding:7px 12px;
        background-color: #f2f4f2;
        vertical-align: middle
        ">
            <a href="?page=1/">首页</a>
        </button>

        <ul class="pagination" style="vertical-align: middle">
            {{ page_html|safe }}
        </ul>

        <button style="
        border: none;
        border-radius:4px;
        padding:7px 12px;
        background-color: #f2f4f2;
        vertical-align: middle
        ">
            <a href="?page={{ last_page }}">尾页</a>
        </button>
    </nav>