加上手動選擇每頁顯示多少條的分佈框架

時間 2019-11-08

標籤加上手動選擇每頁顯示多少分佈框架简体版

原文原文鏈接

利用cookie實現：html

utils中paginations.py不變，跟上上個隨筆同樣。前端

views:python

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.htmljquery

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。