1. 单独用django中的翻页功能Paginator,每次都要在后端配置好页数,然后利用get请求页数之后,后端返回页数的数据,但是要进行排序的话,还是需要在后端先根据时间排序数据,再进行配置页数,每次排序都要刷新一下,能不能在前端排序而不需要刷新页面呢,以下我用vue做为辅助来实现
2. 后端先把所有要展示的数据全部放到前端
views函数这样写:
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
def manualData(request):
data = energyRecord.objects.all()
paginator = Paginator(data, 15)
page_num = paginator.num_pages
return render(request, 'energyApp/page/manualData.html', locals())
page_num是全部一共有多少页。data是所有的数据
3. 前端利用vue来判断要展示的数据
vue用两个字符串判断
一个是is_sort : 判断是否要排序
另一个是is_page : 判断展示的页数
前端页面的代码为:
<div id="test">
<h3>sort的值:[[ id_sort ]],页数是[[ page_num ]],当前页数:[[ is_page ]]</h3>
<button @click="del_page">上一页</button>
<button @click="add_page">下一页</button>
<button @click="sortTime">正序</button>
<button @click="reverseTime">倒序</button>
<button @click="noneTime">正常</button>
<div v-if="is_sort === 'sort'">
{% for i in data|dictsort:"recordTime" %}
<p v-if="is_page === {{ forloop.counter0|divided }}">{{ i.recordTime }}</p>
{% endfor %}
</div>
<div v-else-if="is_sort === 'reversed' ">
{% for i in data|dictsortreversed:"recordTime" %}
<p v-if="is_page === {{ forloop.counter0|divided }}">{{ i.recordTime }}</p>
{% endfor %}
</div>
<div v-else>
{% for i in data %}
<p v-if="is_page === {{ forloop.counter0|divided }}">{{ i.recordTime }}</p>
{% endfor %}
</div>
</div>
var app = new Vue({
delimiters:['[[',']]'],
el:"#test",
data:{
is_sort:'不排序',
is_page:1,
},
methods:{
sortTime:function(){
this.is_sort = 'sort' //正序按钮
},
reverseTime:function(){
this.is_sort = 'reversed' //倒序按钮
},
noneTime:function(){
this.is_sort = ' ' //不排序按钮
},
add_page:function(){
if(this.is_page >= parseInt("{{ page_num }}")){
return this.is_page //增加页数
}
else{
return this.is_page += 1
}
},
del_page:function(page){ //减少页数
if(this.is_page <= 1){
return this.is_page
}
else{
return this.is_page -= 1
}
}
},
computed:{
page_num:function(){ //所有页数
return parseInt("{{ page_num }}")
},
}
})
html模板中,我自己定义了一个过滤器divided ,其实就是分块的,每页显示15行。
@register.filter
def divided(value):
value = int(value / 15) + 1
return value
4.解读:
4.1 html有四大块,第一块为交互控制的,第二块是正序的数据,第三块是倒序的数据,第四块是不排序的数据渲染上去
4.2 然后使用vue中的数据来判断要展示什么数据,其中先判断大块的,如果is_sort == 'sort'则展示正序的数据(第二块),其他块隐藏,如果is_sort == 'reversed'则展示倒序的数据(第三块),其他情况展示第四块的数据。
4.3 块的数据展示完了,在判断展示块里面的数据,用is_page来判断。因为通过django模板的过滤,每个p都有{{ forloop.counter0|divided }}对应的页数,比如说,属于第一页的,{{ forloop.counter0|divided }} 都等于1,数据第二页的,{{ forloop.counter0|divided }}都等于2,这样我们可以通过控制is_page来条件显示p。
结果: