分页

 

后端

 

def get(self,request):
#接收参数
pnum = request.GET,get("pnum")
#把前端传来的参数转成int类型
pnum = int(pnum)
#查询数据
queryset = Road.objects.all()
#创建分页
paginator = Paginator(queryset,10)
#创建页面页码
page = paginator.get_page(pnum)
#自定义resp
resp={}
#向前端要传的数据通过序列化出数据
resp["data"] = Ser_StationZb(page,many=True).data
#上一页
resp=["shangye"] = pnum - 1
#下一页
resp["xiaye"] = pnum + 1
#把页码遍历出来
resp["numlist"] = [num for num in range(1,paginator.num_pages+1)]
#向前端传输数据
request Response(resp)

 

 

 

前端

 

<template>
<div id="index">

<div>
<input type="text" v-model="word" />
<input type="button" value="查询" @click="serch" />
</div>
<div>
出发站:<input type="text" v-model="start" />
终点站:<input type="text" v-model="end" />
<input type="button" value="查询" @click="serch" />
</div>

<table border="1">
<tr>
<th>ID</th>
<th>线路</th>
<th>路线时长</th>
<th>发车间隔</th>
</tr>
<tr v-for="(road,index) in page.data" :key="index">
<td>{{road.id}}</td>

<-- 数据分页 -->

<td><router-link :to="{path:'/station',query:{'rid':road.id}}">{{road.name}}路</router-link></td>

<td>{{road.timelong}}分钟</td>
<td>{{road.jiange}}分钟</td>
</tr>
</table>
<p v-show="length>1">

<-- 分页数据 上页下页 和页码 -->
<a @click="gopage(page.prev)">上一页</a>
<a v-for="(num,index1) in page.numlist" :key="index1" @click="gopage(num)">{{num}}</a>
<a @click="gopage(page.next)">下一页</a>
</p>
</div>
</template>

<script>
export default {
name: "index",
data: function() {
return {
page: {},
word:"",
start:"",
end:"",
length:0,
}
},
created: function() {
this.gopage(1)
},
methods:{
gopage:function(num){
this.axios({
url: "/api/roads",
params:{
pnum:num,
word:this.word,
start:this.start,
end:this.end,
}
}).then(resp => {
console.log(resp)
this.page = resp.data
this.length=resp.data.data.length
})
},
serch:function(){
this.gopage(1)
}
}
}
</script>

<style>
</style>