Vue的分页

Vue分页+django

---

views.py

from django.core.paginator import Paginator
class GetNewslist(APIView):
    def get(self,request):
        mess=Message1.objects.filter().all()
        page_count=2
        pag=Paginator(mess,page_count)
        try:
            p=int(request.GET.get('p'))
        except:
            p=1
        messlist=pag.get_page(p)
        m=Message1ModelSerializer(messlist,many=True)
        res={}
        res['code']=200
        res['newslist']=m.data
        res['cpage']=p
        res['tpage']=pag.num_pages
        return Response(res)

show.vue 注意：引入三个插件

import ‘…/…/static/js/jquery-1.12.4.min.js’
import ‘…/…/static/js/jquery.pagination.min.js’

<template>
    <div id='newslist'>
        <link rel="stylesheet" type="text/css" href="../../static/css/jquery.pagination.css">
            <table border="1">
                <tr>
                    <td>id</td>
                    <td>标题</td>
                    <td>内容</td>
                    <td>作者</td>
                </tr>
                <tr v-for="i in newslist">
                    <td>{{i.id}}</td>
                    <td>{{i.title}}</td>
                    <td>{{i.content}}</td>
                    <td>{{i.author}}</td>
                </tr>
            </table>
            <div id="pagination"></div>
    </div>
</template>
<script>
import '../../static/js/jquery-1.12.4.min.js'
import '../../static/js/jquery.pagination.min.js'
export default {
    name:'newslist',
    data:function(){
        return{
            newslist:[]
        }
    },
    mounted(){
        this.getNewlist(1)
    },
    methods:{
        getNewlist:function(p){
            this.axios({
                url:'/api/getNewslist?p='+p+'&token='+localStorage.getItem('token'),
                method:'get',
            }).then((res)=>{
                this.newslist = res.data.newslist
                this.page(res.data.cpage,res.data.tpage)
            })
        },
        page:function(cpage,tpage){
            var _this=this
            $("#pagination").pagination({
                currentPage:cpage,
                totalPage:tpage,
                callback:function(current){
                    _this.getNewlist(current)
                }
            })
        }
            
    }
}
</script>