简单版：
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})
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 page_list %} {{ j }} {% endfor %} </body> </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 = [] #存放页码地址的列表
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并写入以下内容。
#!_*_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:
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:
<!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代码是调用后端发过来的
浙公网安备 33010602011771号