博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

加上手动选择每页显示多少条的分布框架

Posted on 2019-01-07 22:45  alex_hrg  阅读(209)  评论(0)    收藏  举报

利用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>