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

最新推荐文章于 2025-05-21 17:44:25 发布

原创最新推荐文章于 2025-05-21 17:44:25 发布 · 369 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#列表页

django 同时被 3 个专栏收录

29 篇文章

订阅专栏

django项目

16 篇文章

订阅专栏

django分页

8 篇文章

订阅专栏

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

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