加上手動選擇每頁顯示多少條的分佈框架
阿新 • • 發佈：2019-01-07
利用cookie實現：
utils中paginations.py不變，跟上上個隨筆一樣。
views:
def page(request):
list = [] #生成要發給前端的資料列表
for i in range(1,779):
list.append(i)
cur_page = request.GET.get('page')
dis_count = request.COOKIES.get('dis_count') #利用cookie設定每頁顯示條數
if not dis_count:
dis_count=10
else:
dis_count=int(dis_count)
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=dis_count,tray_len=7)
data = obj.per_page_data #分頁後的內容
nav_str = obj.page_str("/pages") #分佈後的導航
return render(request,'page.html',{'list':data,'dis_list':nav_str})
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>
<span>顯示</span>
<select id="dis_count">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
<span>條</span>
{% for j in dis_list %}
{{ j }}
{% endfor %}
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/jquery.cookie.js"></script>
<script>
{# 框架載入完自動執行，讓頁面重新整理後選中的值還能記住，通過cookie實現#}
$(function () {
if($.cookie('dis_count')!=null){$('#dis_count').val($.cookie('dis_count'))};
if($.cookie('dianti')!=null){$('#dianti').val($.cookie('dianti'))};
});
$('#dianti').change(function () {
$.cookie('dianti',$('#dianti').val(),{path:'/pages'});
location.href="/pages?page="+$('#dianti').val();
});
$('#dis_count').change(function () {
$.cookie('dis_count',$('#dis_count').val(),{path:"/pages"});
location.reload();
});
</script>
</body>
</html>