Djano + vue 实现不刷新的翻页和排序功能

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。

结果：