day20-基于Cookie实现定制显示数据条数
一、前言
我们这边基于cookie实现定制显示数据条数，之前我们在服务端，cookie是能读能写的，但是我们在客户端也是能读能写的，dom原生的读写比较麻烦，如果不设置超时时间的话，是可以的，但是，如果需要设置说明超时时间的话，那就比较麻烦，所以所有的客户端都是通过jquery的插件的jquery-cookie来搞。
二、下载jquery-cookie并使用
2.1、下载
说明：到jquery-cookie官网上下载jquery-cookie的插件
插件地址如下：http://plugins.jquery.com/cookie/1.4.0/
2.2、使用jquery-cookie
说明：因为jquery-cookie是jquery的一个插件，所以在使用的时候需要放在jquery的下面
<script src="/static/jquery-1.12.4.js"></script> <script src="/static/jquery.cookie.js"></script> #放在jquery的下面
2.3、客户端设置cookie
说明：我们利用jquery-cookie设置和获取cookie的值
>>>$.cookie("k1",'v1') #设置cookie
"k1=v1"
>>>$.cookie("k1") #获取cookie
"v1"
>>>$.cookie("k2","v2",{'path':'/index/',}) #设置cookie时添加参数
"k2=v2; path=/index/"
#添加参数的类型
key, 键
value='', 值
expires=None, 超时时间(IE requires expires, so set it if hasn't been already.)
path='/', Cookie生效的路径，/ 表示根路径，特殊的：跟路径的cookie可以被任何url的页面访问
domain=None, Cookie生效的域名
secure=False, https传输
注意了：参数和后端大部分是一样的，只有局部的是不一样的。
三、基于Cookie实现定制显示数据条数
说明：这个是基于day20-自定义分页2的基础上搞的，所以我们这边就改进一下前端和后端
3.1、设置前端的cookie值
说明：在前端增加一个显示数据类型的下拉框，然后分别设置10、30、50页，并且设置一下。
<head>
<style>
.pagination .page{
display: inline-block;
padding: 5px;
background-color: cyan;
margin: 5px;
}
.pagination .page.active{
background-color: brown;
color: white;
}
</style>
</head>
<body>
<ul>
{% for item in li %}
<li>{{ item }}</li>
{% endfor %}
</ul>
<div>
<select onchange="ChangePageSize(this)" id="ps"> #设置页数，绑定onchange事件
<option value="10">10</option>
<option value="30">30</option>
<option value="50">50</option>
</select>
</div>
<div class="pagination">
{{ page_str }}
</div>
<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/jquery.cookie.js"></script>
<script>
$(function(){
var v = $.cookie("per_page_count"); #设置之前先确定当前的页数
$("#ps").val(v);
});
function ChangePageSize(ths){ #获取当前页数的值，当做cookie，传给后台
var v = $(ths).val();
$.cookie("per_page_count",v);
location.reload();
}
</script>
</body>
3.2、后台user_list的代码
说明：后台拿到前端设置好的cookie，然后传入到分页类中
li = list()
for i in range(509):
li.append(i)
def user_list(request):
current_page = request.GET.get("p",1)
current_page = int(current_page)
val = request.COOKIES.get("per_page_count") #获取客户端设置的cookie
val = int(val)
page_obj = pagination.Page(current_page,len(li),val)
data = li[page_obj.start:page_obj.end]
page_str = page_obj.page_str("/user_list/")
return render(request,'user_list.html',{'li':data,'page_str':page_str})
效果图如下：
