本文将为您提供关于HTML–鬼自定义分页的详细介绍,我们还将为您解释html分页css的相关知识,同时,我们还将为您提供关于Ajax自定义分页器、Django分页组件替换自定义分页、Django自定义
本文将为您提供关于HTML – 鬼自定义分页的详细介绍,我们还将为您解释html分页css的相关知识,同时,我们还将为您提供关于Ajax 自定义分页器、Django 分页组件替换自定义分页、Django 自定义分页、Django 自定义分页器的实用信息。
本文目录一览:HTML – 鬼自定义分页(html分页css)
解决方法
正如该文章所述,您需要从Ghost源代码中的core / server / helpers / tpl / pagination.hbs复制默认的分页代码,并使用它在主题的partials目录中创建自己的pagination.hbs文件.
你会看到你需要在那里编辑的标记,即:
<navrole="pagination"> {{#if prev}} <ahref="{{pageUrl prev}}">←</a> {{/if}} <span>Page {{page}} of {{pages}}</span> {{#if next}} <ahref="{{pageUrl next}}">→</a> {{/if}} </nav>
保存编辑后,您需要重新启动Ghost以查看更改.
Ajax 自定义分页器
序
我们每提交一次数据或者每点一个标签就会刷新整个页面,那么如何做到只刷新局部页面呢?
这就需要用到Ajax
Ajax是什么?
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”。
即,使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
Ajax优点
AJAX使用JavaScript技术向服务器发送异步请求;
AJAX请求无须刷新整个页面;
因为服务器响应内容不再是整个页面,而是页面中的部分内容,所以AJAX性能高;
两个关键点:1.局部刷新,2.异步请求
对之前的内容的补充
MTV模型与MVC模型
MTV模型(django特有的)
Model(模型):负责业务对象与数据库的对象(ORM)
Template(模版):负责如何把页面展示给用户
View(视图):负责业务逻辑,并在适当的时候调用Model和Template
MVC模型
Model:负责业务对象与数据库的映射(ORM)
View:负责与用户的交互
Control:接受用户的输入调用模型和视图完成用户的请求
MTV模型本质上也是MVC模型
多对多表三种创建方式
1.第一种 django orm自动帮我们创建
这种方式创建的关联表只有外键字段,不能添加其它的字段,但是可以很方便的正反向跨表查询
class Book(models.Model): name = models.CharField(max_length=32) authors = models.ManyToManyField(to=‘Author‘)#自动创建关联表,表里面只有外键字段 class Author(models.Model): name = models.CharField(max_length=32)
2.第二种纯手动创建第三张表
我们自己手动创建关联表的话就可以添加其它的字段了,但问题是正反向查询不能使用了
class Book(models.Model): name = models.CharField(max_length=32) class Author(models.Model): name = models.CharField(max_length=32) class Book2Author(models.Model): book = models.ForeignKey(to=‘Book‘) author = models.ForeignKey(to=‘Author‘) info = models.CharField(max_length=32)
3.第三种半自动创建第三张表(可扩展性高,并且能够符合orm查询)
既可以添加字段,又支持正反向查询
class Book(models.Model): name = models.CharField(max_length=32) # 第三种创建表的方式 authors = models.ManyToManyField(to=‘Author‘,through=‘Book2Author‘,through_fields=(‘book‘,‘author‘)) class Author(models.Model): name = models.CharField(max_length=32) # book = models.ManyToManyField(to=‘Book‘,through_fields=(‘author‘,‘book‘)) class Book2Author(models.Model): book = models.ForeignKey(to=‘Book‘) author = models.ForeignKey(to=‘Author‘) info = models.CharField(max_length=32)#可以添加新字段
前后端传输数据编码格式contentType
urlencoded(默认)
对应的数据格式:name=jason&password=666
后端获取数据:request.POST
ps;django会将urlencoded编码的数据解析自动放到request.POST
前端数据格式都是??=??&??=??,如果有一个上传文件,也会有一个??=??数据格式,然后后端request.POST拿 到的字典里面放的就只是文件的名字
formdata #form标签里面修改enctype="multipart/form-data"
form表单传输文件的编码格式
后端获取文件格式数据:request.FILES
后端获取普通键值对数据:request.POST
application/json #ajax语法里面加contentType:"application/json"
ajax发送json格式数据
需要注意的点
编码与数据格式要一致,
后端接受数据用request.body,拿到的是一个bytes类型,需要做一些转换
前端朝后端发请求的方式
- 浏览器窗口手动输入网址 get请求
- a标签的href属性 get请求
- form表单 get/post请求(默认是get请求)
- ajax get/post请求
ajax基本语法
提交的地址(url)
提交的方式(type)
提交的数据(data)
回调函数(success)
<script>
$(‘#d1‘).click(function () { $.ajax({ // 提交的地址 url:‘/index/‘,// 提交的方式 type:‘post‘,// 提交的数据 data:{‘name‘:‘jason‘,‘password‘:‘123‘},// 回调函数 success:function (data) { // data接收的就是异步提交返回的结果 alert(data) } }) })
</script>
Ajax传输json格式数据
一定要设置contentType:‘application/json‘,
$(‘#d1‘).click(function () { $.ajax({ url:‘‘,// url参数可以不写,默认就是当前页面打开的地址 type:‘post‘,contentType:‘application/json‘, data:JSON.stringify({‘name‘:‘jason‘,‘hobby‘:‘study‘}),success:function (data) { {#alert(data)#} {#$(‘#i3‘).val(data)#} } }) });
Ajax传输文件
需要借助内置对象FormDate,FormData对象不仅仅可以传文件还可以传普通的键值对,并且django能够自动识别改formdata对象。
$(‘#d1‘).click(function () { let formdata = new FormData(); // FormData对象不仅仅可以传文件还可以传普通的键值对 formdata.append(‘name‘,‘jason‘); // 获取input框存放的文件 //$(‘#i1‘)[0].files[0] formdata.append(‘myfile‘,$(‘#i1‘)[0].files[0]); $.ajax({ url:‘‘,type:‘post‘,data:formdata,// ajax发送文件需要修改两个固定的参数 processData:false, // 告诉浏览器不要处理我的数据 contentType:false, // 不要用任何的编码,就用我formdata自带的编码格式,django能够自动识别改formdata对象 // 回调函数 success:function (data) { alert(data) } }) });
form表单与ajax异同点
1.form表单不支持异步提交局部刷新
2.form表单不支持传输json格式数据
3.form表单与ajax默认传输数据的编码格式都是urlencoded
批量插入数据
for循环动态插入100条数据:
for i in range(100):
models.Booke2.objects.create(name="第%s本书"%i)
用这种方法插入数据会很慢,以为每循环一次就会走一次数据库
使用bulk_create
l = []
for i in range(10000):
l.append(models.Book2(name=‘第%s本书‘%i))
models.Book2.objects.bulk_create(l) # 批量插入数据,非常快
补充:<li><a href="?page=1">1</a></li> # 自动补全当前路径
自定义分页器
class Pagination(object): def __init__(self,current_page,all_count,per_page_num=2,pager_count=11): """ 封装分页相关数据 :param current_page: 当前页 :param all_count: 数据库中的数据总条数 :param per_page_num: 每页显示的数据条数 :param pager_count: 最多显示的页码个数 用法: queryset = model.objects.all() page_obj = Pagination(current_page,all_count) page_data = queryset[page_obj.start:page_obj.end] 获取数据用page_data而不再使用原始的queryset 获取前端分页样式用page_obj.page_html """ try: current_page = int(current_page) except Exception as e: current_page = 1 if current_page < 1: current_page = 1 self.current_page = current_page self.all_count = all_count self.per_page_num = per_page_num # 总页码 all_pager,tmp = divmod(all_count,per_page_num) if tmp: all_pager += 1 self.all_pager = all_pager self.pager_count = pager_count self.pager_count_half = int((pager_count - 1) / 2) @property def start(self): return (self.current_page - 1) * self.per_page_num @property def end(self): return self.current_page * self.per_page_num def page_html(self): # 如果总页码 < 11个: if self.all_pager <= self.pager_count: pager_start = 1 pager_end = self.all_pager + 1 # 总页码 > 11 else: # 当前页如果<=页面上最多显示11/2个页码 if self.current_page <= self.pager_count_half: pager_start = 1 pager_end = self.pager_count + 1 # 当前页大于5 else: # 页码翻到最后 if (self.current_page + self.pager_count_half) > self.all_pager: pager_end = self.all_pager + 1 pager_start = self.all_pager - self.pager_count + 1 else: pager_start = self.current_page - self.pager_count_half pager_end = self.current_page + self.pager_count_half + 1 page_html_list = [] # 添加前面的nav和ul标签 page_html_list.append(‘‘‘ <nav aria-label=‘Page navigation>‘ <ul class=‘pagination‘> ‘‘‘) first_page = ‘<li><a href="?page=%s">首页</a></li>‘ % (1) page_html_list.append(first_page) if self.current_page <= 1: prev_page = ‘<lihttps://www.jb51.cc/tag/dis/" target="_blank">disabled"><a href="#">上一页</a></li>‘ else: prev_page = ‘<li><a href="?page=%s">上一页</a></li>‘ % (self.current_page - 1,) page_html_list.append(prev_page) for i in range(pager_start,pager_end): if i == self.current_page: temp = ‘<li><a href="?page=%s">%s</a></li>‘ % (i,i,) else: temp = ‘<li><a href="?page=%s">%s</a></li>‘ % (i,) page_html_list.append(temp) if self.current_page >= self.all_pager: next_page = ‘<lihttps://www.jb51.cc/tag/dis/" target="_blank">disabled"><a href="#">下一页</a></li>‘ else: next_page = ‘<li><a href="?page=%s">下一页</a></li>‘ % (self.current_page + 1,) page_html_list.append(next_page) last_page = ‘<li><a href="?page=%s">尾页</a></li>‘ % (self.all_pager,) page_html_list.append(last_page) # 尾部添加标签 page_html_list.append(‘‘‘ </nav> </ul> ‘‘‘) return ‘‘.join(page_html_list)
后端:
from app01.utils import my_page #django可以自定义文件夹自定义py文件 book_list = models.Book2.objects.all() # 数据总条数 all_count = book_list.count() # 当前页 current_page = request.GET.get(‘page‘,1) # 示例一个分页器对象 page_obj = my_page.Pagination(current_page=current_page,all_count=all_count) # 对总数据进行切片 page_queryset = book_list[page_obj.start:page_obj.end] 前端: {{ page_obj.page_html|safe }} # 帮你渲染的是带有bootstrap样式的分页器
Django 分页组件替换自定义分页
Django的分页器(paginator)
总之不太好用我们还是用自己的好一些
自定义分页器
分页实现源码


"""
自定义分页组件
"""
class Pagination(object):
def __init__(self, current_page, all_count, base_url, params, per_page_num=8, pager_count=11, ):
"""
封装分页相关数据
:param current_page: 当前页
:param all_count: 数据库中的数据总条数
:param base_url: 分页中显示的URL前缀
:param params: request.get 对象
:param per_page_num: 每页显示的数据条数
:param pager_count: 最多显示的页码个数
"""
try:
current_page = int(current_page)
except Exception as e:
current_page = 1
if current_page < 1:
current_page = 1
self.current_page = current_page
self.all_count = all_count
self.per_page_num = per_page_num
self.base_url = base_url
all_pager, tmp = divmod(all_count, per_page_num)
if tmp:
all_pager += 1
self.all_pager = all_pager
self.pager_count = pager_count
self.pager_count_half = int((pager_count - 1) / 2)
import copy
params = copy.deepcopy(params)
params._mutable = True
self.params = params # self.params : {"page":77,"title":"python","nid":1}
@property
def start(self):
return (self.current_page - 1) * self.per_page_num
@property
def end(self):
return self.current_page * self.per_page_num
def page_html(self):
# 如果总页码 < 11个:
if self.all_pager <= self.pager_count:
pager_start = 1
pager_end = self.all_pager + 1
# 总页码 > 11
else:
# 当前页如果<=页面上最多显示(11-1)/2个页码
if self.current_page <= self.pager_count_half:
pager_start = 1
pager_end = self.pager_count + 1
# 当前页大于5
else:
# 页码翻到最后
if (self.current_page + self.pager_count_half) > self.all_pager:
pager_start = self.all_pager - self.pager_count + 1
pager_end = self.all_pager + 1
else:
pager_start = self.current_page - self.pager_count_half
pager_end = self.current_page + self.pager_count_half + 1
page_html_list = []
self.params["page"] = 1
first_page = ''<li><a href="%s?%s">首页</a></li>'' % (self.base_url, self.params.urlencode(),)
page_html_list.append(first_page)
if self.current_page <= 1:
prev_page = ''<li><a href="#">上一页</a></li>''
else:
self.params["page"] = self.current_page - 1
prev_page = ''<li><a href="%s?%s">上一页</a></li>'' % (self.base_url, self.params.urlencode(),)
page_html_list.append(prev_page)
for i in range(pager_start, pager_end):
self.params["page"] = i
if i == self.current_page:
temp = ''<li><a href="%s?%s">%s</a></li>'' % (self.base_url, self.params.urlencode(), i,)
else:
temp = ''<li><a href="%s?%s">%s</a></li>'' % (self.base_url, self.params.urlencode(), i,)
page_html_list.append(temp)
if self.current_page >= self.all_pager:
next_page = ''<li><a href="#">下一页</a></li>''
else:
self.params["page"] = self.current_page + 1
next_page = ''<li><a href="%s?%s">下一页</a></li>'' % (self.base_url, self.params.urlencode(),)
page_html_list.append(next_page)
self.params["page"] = self.all_pager
last_page = ''<li><a href="%s?%s">尾页</a></li>'' % (self.base_url, self.params.urlencode(),)
page_html_list.append(last_page)
return ''''.join(page_html_list)
视图函数调用


from django.shortcuts import render,HttpResponse
# Create your views here.
from .models import *
def index(request):
''''''
book_list=[]
for i in range(500):
book_obj=Book(title="book_%s"%i,price=i*i)
book_list.append(book_obj)
Book.objects.bulk_create(book_list)
''''''
current_page = request.GET.get("page", 1)
all_count = Book.objects.all().count()
base_url = request.path # /index/
from app01.utils.page import Pagination
pagination = Pagination(int(current_page),all_count,base_url,request.GET, per_page_num=8, pager_count=11,)
# def __init__(self, current_page, all_count, base_url, params, per_page_num=8, pager_count=11, ):
book_list = Book.objects.all()[pagination.start:pagination.end]
from django.http.request import QueryDict
# dic = QueryDict(mutable=True)
# dic["info"] = 123
# print(type(request.GET))
# request.GET["info"]=123
import copy
params = copy.deepcopy(request.GET)
params["xxx"] = 123
return render(request, "index.html", locals())
模板使用展示


<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<ul>
{% for foo in book_list %}
<li>{{ foo }}</li>
{% endfor %}
</ul>
<nav>
<ul class="pagination">
{{ pagination.page_html|safe }}
</ul>
</nav>
</body>
</html>
Django 自定义分页
Django 自定义分页
定一个一个类
# 说明
#1.通过传入对应的参数,自动生成html标签代码 ,并返回,前段只需接收并渲染显示即可
#2.请注意标签内的网址接口,如更改,请修改对应的值
class PageInfo:
def __init__(self, cur_page, total, per_page=10, show_page=11):
self.cur_page = cur_page
self.per_page = per_page
self.total = total
self.show_page = show_page
a, b = divmod(self.total, self.per_page)
if b:
a = a + 1
self.total_page = a #### 总页数
#### 获取起始索引
def get_start(self):
start = (self.cur_page - 1) * self.per_page
return start
#### 获取结束索引
def get_end(self):
return self.cur_page * self.per_page
def get_page(self):
half = (self.show_page - 1) // 2
#### taotal_page = 5 < show_page = 11
if self.total_page < self.show_page:
begin = 1
end = self.total_page
else:
#### 左边极值判断
if self.cur_page - half <= 0:
begin = 1
# end = self.cur_page + half
end = self.show_page
#### 右边极值的判断
elif self.cur_page + half > self.total_page:
# begin = self.cur_page - half
begin = self.total_page - self.show_page + 1
end = self.total_page ### 31
#### 正常页码判断
else:
begin = self.cur_page - half
end = self.cur_page + half
page_list = []
if self.cur_page == 1:
astr = "<li><a href=''#'' aria-label=''Previous''><span aria-hidden=''true''>«</span></a></li>"
else:
astr = "<li><a href=''/classes/?cur_page=%s'' aria-label=''Previous''><span aria-hidden=''true''>«</span></a></li>" % (
self.cur_page - 1)
page_list.append(astr)
for i in range(begin, end + 1):
if self.cur_page == i:
# astr = "<adisplay:inline-block; padding:5px;margin:5px;background-color:red;'' href=''/custom/?cur_page=%s''>%s</a>" % (i, i)
astr = "<liactive''><a href=''/classes/?cur_page=%s''>%s</a></li>" % (i, i)
else:
# astr = "<adisplay:inline-block; padding:5px;margin:5px'' href=''/custom/?cur_page=%s''>%s</a>" % (i, i)
astr = "<li><a href=''/classes/?cur_page=%s''>%s</a></li>" % (i, i)
page_list.append(astr)
if self.cur_page == self.total_page:
astr = "<li><a href=''#'' aria-label=''Next''><span aria-hidden=''true''>»</span></a></li>"
else:
astr = "<li><a href=''/classes/?cur_page=%s'' aria-label=''Next''><span aria-hidden=''true''>»</span></a></li>" % (
self.cur_page + 1)
page_list.append(astr)
s = " ".join(page_list)
return s
定义一个函数来实现类的使用
def classes(request):
if request.method == ''GET'':
cur_page = request.GET.get(''cur_page'') #首先获取前端传来的url参数
if not cur_page: # 有的是直接传过来一个没有参数的 ,我们默认给他一个第一页
cur_page = 1
cur_page = int(cur_page) #因为传过来的是一个文本类型,要转换成整型
res = models.Classes.objects.all() #连接数据库,获取全部信息
total = models.Classes.objects.count() #连接数据库获取数据库总数量
page = PageInfo(cur_page, total) #实例化上边的类
start = page.get_start() #通过类获取起始页
end = page.get_end() #通过类获取结束页
user_list = models.Classes.objects.all()[start:end] #连接数据库通过获取指定范围的数据,相当于原生SQL的limit
return render(request, "classes.html", {''classes'': res, "user_list": user_list, "page": page}) #最后将获取的数据一并发给前段
前段渲染实现方式
//说明: 使用了bootstrap美化,
<table border="1px">
<thead> //标题头
<tr>
<th>ID</th>
<th>班级名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for item in user_list %} //这里是渲染后端传来的分页后的数据
<tr>
<td>{{ item.cid }}</td>
<td>{{ item.cname }}</td>
<td>
//这段代码可以忽略
<a href="/del_classes/?cid={{ item.cid }}">删除</a>
<a href="/up_class/?cid={{ item.cid }}">更新</a>
<button>ajax更新</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<nav aria-label="Page navigation">
<ul>
{{ page.get_page | safe}} //这里显示的是分页导航栏,也就是有多少页 分出多少个按钮
</ul>
</nav>
Django 自定义分页器
Django 自定义分页器
今天关于HTML – 鬼自定义分页和html分页css的讲解已经结束,谢谢您的阅读,如果想了解更多关于Ajax 自定义分页器、Django 分页组件替换自定义分页、Django 自定义分页、Django 自定义分页器的相关知识,请在本站搜索。
本文标签: