版权声明:本文为博主原创文章,未经博主允许不得转载 https://blog.csdn.net/g_optimistic/article/details/89105120
目录
1.编写返回数据的函数,以json的格式进行数据返回
视图文件 urls.py
def list_student(request):
if request.method=='GET':
page=request.GET.get("page")
page_size=request.GET.get("page_size")
once_page=5
if not page:
page=1
if not page_size:
page_size=once_page
page=int(page)
page_size=int(page_size)
s_n = page / once_page
if page % once_page == 0:
s_n = int(page / once_page)
r_n = once_page
else:
s_n = int(page / once_page) + 1
r_n = page % once_page
total=Student.objects.all()#查询所有的数据
select_start = (s_n - 1) * once_page*page_size
select_end = s_n * once_page*page_size
select_range = total[select_start:select_end]
return_start = (r_n - 1) * page_size
return_end = r_n * page_size
return_range = select_range[return_start:return_end]
if page <= 3:
page_range = [1, 2, 3, 4, 5]
else:
page_range = range(page - 2, page + 3)
return_list=[]
for data in return_range:
if data.picture:
pic=data.picture.url
else:
pic="None"
return_list.append({
"name":data.name,
"gender":data.gender,
"age":data.age,
"classes":data.classes,
"grade":data.grade,
"picture":pic,
})
result={"data":return_list,"page_range":','.join([str(i) for i in page_range])}
return JsonResponse(result)
2.编写返回页面的函数,将文章的列表页进行返回
def studentList(request):
return render(request,'student_v1.html',locals())
3.使用ajax动态请求返回数据的函数的路由,获取数据
4.将数据使用vue进行绑定
<script>
$.ajax({
url:"/student_list/",
type:"get",
data:"",
success:function(data){
p_range=data["page_range"].split(",");
var vue=new Vue({
el:"#bindData",
data:{
page_data:data["data"],
page_range:p_range,
},
methods:{
reload:function(page){
alert(page)
}
}
})
},
error:function(error){
console.log(error)
}
})
</script>
5.进行数据渲染
{% verbatim myblock %}
<div id="bindData">
<table class="table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>班级</th>
<th>专业</th>
</tr>
</thead>
<tbody>
<tr v-for="s in page_data">
<td>{{ s.name }}</td>
<td>{{ s.gender }}</td>
<td>{{ s.age }}</td>
<td>{{ s.classes }}</td>
<td>{{ s.grade }}</td>
</tr>
</tbody>
</table>
<ul class="pagination" style="float:right;">
<li v-for="p in page_range" class="paginate_button page-item active">
<a v-on:click="reload" class="page-link">{{ p }}</a>
</li>
</ul>
</div>
{% endverbatim myblock %}