django分頁功能實現

時間  2019-11-08
標籤 django 分頁 功能 實現 欄目 Python 简体版
原文   原文鏈接

簡單版：html

1,views前端

from django.shortcuts import render,HttpResponse
from django.utils.safestring import mark_safe
# Create your views here.

def page(request):
    list = []   #要發給前端的數據列表
    page_list = []  #存放頁碼地址的列表
    for i in range(1,109):
        list.append(i)
    dis_count = 10  #每頁顯示條數
    count = len(list)
    cur_page = request.GET.get('page')
    if not cur_page:
        cur_page = 1
    start = (int(cur_page)-1)*dis_count
    end = int(cur_page)*dis_count
    data = list[start:end]
    x,y = divmod(count,dis_count)  #求模取餘，若是餘數不爲0，模數要加1頁
    if y:
        x += 1
    for j in range(1,x+1):
        if j==int(cur_page):
            str = '<a class="active" href="/page?page=%s">%s</a>' % (j, j)
        else:
            str = '<a href="/page?page=%s">%s</a>' %(j,j)
        str = mark_safe(str)
        page_list.append(str)
    return render(request,'page.html',{'list':data,'page_list':page_list})
View Code

2,templatepython

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<ui>
    {% for i in list %}
        <li>{{ i }}</li>
    {% endfor %}
</ui>
{% for j in page_list %}
    {{ j }}
{% endfor %}
</body>
</html>
View Code

高級版：jquery

1，viewsdjango

from django.shortcuts import render,HttpResponse
from django.utils.safestring import mark_safe
# Create your views here.

def page(request):
    list = []   #要發給前端的數據列表
    page_list = []  #存放頁碼地址的列表
    dis_pagelist = [] #底側導航條內容，發送到前端的
    for i in range(1,779):
        list.append(i)
    dis_count = 10  #每頁顯示條數
    count = len(list)
    cur_page = int(request.GET.get('page'))
    if not cur_page:
        cur_page = 1
    start = (cur_page-1)*dis_count
    end = cur_page*dis_count
    data = list[start:end]
    x,y = divmod(count,dis_count)  #求模取餘，若是餘數不爲0，模數要加1頁
    if y:
        x += 1
    for j in range(1,x+1):
        if j==cur_page:
            str = '<a class="active" href="/page?page=%s">%s</a>' % (j, j)  #當前活動面前加個class
        else:
            str = '<a href="/page?page=%s">%s</a>' %(j,j)
        str = mark_safe(str)
        page_list.append(str)
    #如下是頁碼超過7頁則只顯示7頁
    tray_len = 7   #定義顯示頁面長度，注意只能爲單數
    if x < tray_len:
        dis_pagelist = page_list[0:x]
    else:
        if cur_page<(tray_len+1)/2:
            dis_pagelist = page_list[0:tray_len]
        elif cur_page>x-(tray_len+1)/2:
            dis_pagelist = page_list[x-tray_len:x]
        else:
            dis_pagelist = page_list[int(cur_page-(tray_len+1)/2):int(cur_page+(tray_len+1)/2-1)]

    dianti = '<span>跳轉：</span><select id="dianti">'
    for ii in range(1,len(page_list)+1):
        temp = '<option>'+repr(ii)+'</option>'
        dianti = dianti + temp
    dianti = dianti + '</select>'
    dis_pagelist.insert(0,mark_safe(dianti))

    dis_pagelist.insert(1,mark_safe('<a href="/page?page=1">首頁</a>'))
    if cur_page==1:
        prepage='<a href="/page?page='+repr(cur_page)+'">上一頁</a>'
    else:
        prepage = '<a href="/page?page=' + repr(cur_page - 1) + '">上一頁</a>'
    dis_pagelist.insert(2,mark_safe(prepage))
    if cur_page==x:
        nextpage='<a href="/page?page='+repr(cur_page)+'">下一頁</a>'
    else:
        nextpage='<a href="/page?page='+repr(cur_page+1)+'">下一頁</a>'
    dis_pagelist.append(mark_safe(nextpage))
    lastpage='<a href="/page?page='+repr(x)+'">尾頁</a>'
    dis_pagelist.append(mark_safe(lastpage))

    return render(request,'page.html',{'list':data,'dis_list':dis_pagelist,})

2,template後端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<ui>
    {% for i in list %}
        <li>{{ i }}</li>
    {% endfor %}
</ui>

{% for j in dis_list %}
    {{ j }}
{% endfor %}

<script src="/static/jquery-3.3.1.js"></script>
<script>
    $('#dianti').change(function () {
        location.href="/page?page="+$('#dianti').val();
    })
</script>
</body>
</html>

模塊版：安全

1，在項目下建立一個utils目錄，裏面建立paginations.py並寫入如下內容。app

#!_*_coding:utf-8_*_
#__author__:"Alex huang"
from django.utils.safestring import mark_safe
class page_mod:
    def __init__(self,data,dis_count=10,tray_len=7,cur_page=1):
        self.data=data   #data應爲一個列表，值爲要顯示的全部數據
        self.dis_count=dis_count    #設置每頁顯示數據條數
        self.tray_len=tray_len      #設置下邊導航頁的長度，值爲基數
        self.cur_page=cur_page   #當前顯示頁
        self.data_num=len(data)
        self.list = []  # 要發給前端的數據列表
        self.page_list = []  # 存放導航頁碼地址的列表

    @property   #加了此裝飾器，在對象調用時，能夠不帶括號，使代碼美觀
    def start(self):   #返回指定頁面cur_page的數據開始位置
        return (self.cur_page-1)*self.dis_count

    @property
    def end(self):    #返回指定頁面cur_page的數據結束位置
        return self.cur_page*self.dis_count

    @property    #每頁要顯示的具體那10條數據列表
    def per_page_data(self):
        return self.data[self.start:self.end]

    @property
    def nav_num(self):   #下方導航超鏈的個數
        x, y = divmod(self.data_num, self.dis_count)  # 求模取餘，若是餘數不爲0，模數要加1頁
        if y:
            x += 1
        return x

    def page_str(self,base_url):   #生成發給前端的導航列表字符串,base_url爲獲取分佈的url
        for j in range(1, self.nav_num + 1):
            if j == self.cur_page:
                str = '<a style="background-color: grey" href="%s?page=%s">%s</a>' % (base_url,j,j)  # 當前活動頁面前加個底色
            else:
                str = '<a href="%s?page=%s">%s</a>' % (base_url,j,j)
            str = mark_safe(str)    #將發送給前端的字符串標記爲安全的，防止xss攻擊攔截。
            self.page_list.append(str)    #生成全部導航超鏈，若是內容過多，還須要剪栽，只顯示規定長度
        # 如下是頁碼超過7頁則只顯示7頁，7爲默認tray_len值
        if self.nav_num < self.tray_len:
            dis_pagelist = self.page_list[0:self.nav_num]    #總導航長度小於7
        else:
            if self.cur_page < (self.tray_len + 1) / 2:
                dis_pagelist = self.page_list[0:self.tray_len]    #當前頁是導航前幾頁時，爲了保持導航頁始終等於7
            elif self.cur_page > self.nav_num - (self.tray_len + 1) / 2:
                dis_pagelist = self.page_list[self.nav_num - self.tray_len:self.nav_num]   #當前頁是導航最後幾頁時，爲了保持導航頁始終等於7
            else:
                dis_pagelist = self.page_list[int(self.cur_page - (self.tray_len + 1) / 2):int(self.cur_page + (self.tray_len + 1) / 2 - 1)]   #導航條顯示當前頁的先後各四頁

        dianti = '<span>跳轉：</span><select id="dianti">'
        for ii in range(1, len(self.page_list) + 1):
            temp = '<option>' + repr(ii) + '</option>'
            dianti = dianti + temp
        dianti = dianti + '</select>'
        dis_pagelist.insert(0, mark_safe(dianti))

        dis_pagelist.insert(1, mark_safe('<a href="%s?page=1">首頁</a>' %base_url))
        if self.cur_page == 1:
            prepage = '<a href="%s?page=' %base_url + repr(self.cur_page) + '">上一頁</a>'
        else:
            prepage = '<a href="%s?page=' %base_url + repr(self.cur_page - 1) + '">上一頁</a>'
        dis_pagelist.insert(2, mark_safe(prepage))
        if self.cur_page == self.nav_num:
            nextpage = '<a href="%s?page=' %base_url + repr(self.cur_page) + '">下一頁</a>'
        else:
            nextpage = '<a href="%s?page=' %base_url + repr(self.cur_page + 1) + '">下一頁</a>'
        dis_pagelist.append(mark_safe(nextpage))
        lastpage = '<a href="%s?page=' %base_url + repr(self.nav_num) + '">尾頁</a>'
        dis_pagelist.append(mark_safe(lastpage))

        return dis_pagelist

2，在視圖裏調用views:xss

from django.shortcuts import render,HttpResponse
from django.utils.safestring import mark_safe
# Create your views here.
from utils import paginations

def page(request):
    list = []   #生成要發給前端的數據列表
    for i in range(1,779):
        list.append(i)

    cur_page = request.GET.get('page')
    if not cur_page:
        cur_page = 1
    else:
        cur_page = int(cur_page)

    obj = paginations.page_mod(data=list,cur_page=cur_page,dis_count=10,tray_len=7)
    data = obj.per_page_data    #分頁後的內容
    nav_str = obj.page_str("/page")   #分佈後的導航

    return render(request,'page.html',{'list':data,'dis_list':nav_str})

3，前端templates頁面page.html: ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ui>
    {% for i in list %}
        <li>{{ i }}</li>
    {% endfor %}
</ui>

{% for j in dis_list %}
    {{ j }}
{% endfor %}

<script src="/static/jquery-3.3.1.js"></script>
<script>
    $('#dianti').change(function () {
        location.href="/page?page="+$('#dianti').val();
    })
</script>
</body>
</html>

　　上面js代碼是調用後端發過來的

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程