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>