基于vue和ajax分页的列表页的完善

一个回和

于 2019-04-08 21:36:30 发布

阅读量354

点赞数

CC 4.0 BY-SA版权

分类专栏： django分页 django项目 django 文章标签：列表页

本文链接：https://blog.youkuaiyun.com/g_optimistic/article/details/89109700

django 同时被 3 个专栏收录

29 篇文章

订阅专栏

django项目

16 篇文章

订阅专栏

django分页

8 篇文章

订阅专栏

本文介绍了一个基于Vue的分页组件实现案例，展示了如何通过Vue和Ajax技术进行数据的分页展示。具体包括了页面布局设计、数据绑定及分页导航的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.效果

其他操作请看基于vue和ajax的分页

https://blog.youkuaiyun.com/g_optimistic/article/details/89105120

2.代码

{% verbatim myblock %}
              <div id="bindData">
                  <table class="table table-bordered">
                      <thead>
                      <tr>
                          <th>姓名</th>
                          <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><input type="text" v-bind:value="s.classes"></td>
                          <td>{{ s.grade }}</td>
                          <td>
                              <button class="btn btn-primary">修改</button>
                              <button class="btn btn-warning">详情</button>
                              <button class="btn btn-danger">删除</button>
                          </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 %}