基于Vue和Ajax的分页

版权声明：本文为博主原创文章，未经博主允许不得转载 https://blog.csdn.net/g_optimistic/article/details/89105120

目录

1.编写返回数据的函数，以json的格式进行数据返回

2.编写返回页面的函数，将文章的列表页进行返回

3.使用ajax动态请求返回数据的函数的路由，获取数据

4.将数据使用vue进行绑定

5.进行数据渲染

6.启动服务器

---

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 %}

6.启动服务器