Element Pagination 分页修改页码当前页无效

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Element Pagination 分页修改页码当前页无效相关的知识,希望对你有一定的参考价值。

参考技术A 需求:每次打开弹窗,当前页都是第1页

直接修改当前页的值不生效

给pagination分页组件添加v-if,这样每次打开弹窗都会重新渲染pagination分页组件,此时可以修改当前页

Django Pagination

Django自带一个分页模块Pagination,具体的参考官方文档,我在这里简单介绍一下具体的例子,模拟一个常用场景,列出部分的代码出来。场景是这样的:我们有一个blog表,其中有若干条记录,我们要对这些记录集进行分页,每页有10条记录,把页码列举出来,页码以a标签的方式链接到本身页码的页面(注意:不是采用Ajax的方式)。

第一步,取出blog表的全部记录,定义每页记录数,定义当前页 前边页码范围和后边页码范围。
views.py
....
    from django.core.paginator import Paginator,InvalidPage,EmptyPage,PageNotAnInteger
    blogs=Blog.objects.all()
    page_size=10
    after_range_num = 5
    before_range_num = 6   
    try:
        if page < 1:
            page = 1
    except ValueError:
        page = 1  
    paginator = Paginator(blogs,page_size)
    try:
        blogs = paginator.page(page)
    except(EmptyPage,InvalidPage,PageNotAnInteger):
        blogs = paginator.page(1)
    if page >= after_range_num:
        page_range = paginator.page_range[page-after_range_num:page+before_range_num]
    else:
        page_range = paginator.page_range[0:int(page)+before_range_num]

index.html
{% for b in page_objects.object_list%}
<div class="node_article">
<h3><a href=‘{{b.get_absolute_url}}‘>{{b.title}}</a></h3>
<p>{{b.content|safe|escape}}</p>
</div>
{%endfor%}
page_objects对象不能看做blog的记录集,page_objects.object_list才是你想要的,然后循环输出记录,把该页的数据集呈现出来。
第三部,页码呈现。
....
{% if page_objects.has_previous %}
<a href="?page={{ page_objects.previous_page_number }}" title="Pre">上一页</a> {% endif %}
{% for p in page_range %}
{% ifequal p page_objects.number %}
<span style="font-size:16px;" title="当前页"><b>{{p}}</b></span>        
{% else %}<a href="?page={{p}}" title="第{{p}}页">{{p}}</a>{% endifequal %}
{% endfor %}     
{% if page_objects.has_next %}
<a href="?page={{ page_objects.next_page_number }}" title="Next">下一页</a>
 {% endif %}  
<b>
{%if page_objects.paginator.num_pages%}共 {{ page_objects.paginator.num_pages }} 页{%endif%}
</b>
</p>
....
原文链接:
http://blog.csdn.net/clh604/article/details/9284035

以上是关于Element Pagination 分页修改页码当前页无效的主要内容,如果未能解决你的问题,请参考以下文章

jquery pagination分页 页码显示出来的原理

关于vue+Element-ui项目分页刷新不停留在当前页码bug解决

element-plus组件默认的是英文 改为中文 (Pagination 分页)

element ui源码解析 -- Pagination篇( 副:列表页进入详情页再返回后,如何保持当前页码正确 )

修改elementUI中分页器的背景色"el-pagination"

Django Pagination