Django实现分页

三步搞定分页:

一、paginator基本语法

基本语法

这个只是内置paginator的语法,看一看里面包含什么方法就好,认真去记的话就输了。真正调用的时候其实很简单!

这里写图片描述

建议大家把上面的实例一条条地看一遍,不用记!但是你会发现,很多都是用来做if判断的参数,这时候,有经验的小伙伴就开始有点眉目了!搞大半天原来做分页就是一连串的if——else判断!

二、视图实例讲解

接下来给大家把view中用到的参数和模块讲解一下,你会发现,其实用到的变量也就那么几个而已!

这里写图片描述

看!主要把要查询的结果集获取到,然后交给Paginator就好了,格式是:

Paginator(‘要进行分页的结果’,‘每页显示的数据量’,‘少于多少条数据会自动合并到前一页’)
这样看起来是不是好理解多了?因为paginator内置的方法已经帮你处理了很多事情了,你只管传参数就行!

三、模板设置

接下来就是要做模板设置了,就是一连串的if——else语句而已!还记得之前基本语法实例里的东西吗?其实用到的就只有这几个:

has_previous :是否有上一页
previous_page_number:第二分页对象的上一页码的值
paginator.page_range:总页数范围
has_next:是否有下一页

这里写图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基本的Vue数据分页示例: ```html <template> <div> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> </thead> <tbody> <tr v-for="(user, index) in pagedUsers" :key="index"> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td>{{ user.email }}</td> <td>{{ user.phone }}</td> </tr> </tbody> </table> <div class="pagination"> <button @click="prevPage">Prev</button> <span v-for="page in totalPage" :key="page"> <button :class="{ active: page === currentPage }" @click="setCurrentPage(page)">{{ page }}</button> </span> <button @click="nextPage">Next</button> </div> </div> </template> <script> export default { data() { return { users: [], // 所有用户数据 currentPage: 1, // 当前页码 pageSize: 10, // 每页数据量 }; }, computed: { // 计算总页数 totalPage() { return Math.ceil(this.users.length / this.pageSize); }, // 根据当前页码和每页数据量计算分页后的用户数据 pagedUsers() { const startIndex = (this.currentPage - 1) * this.pageSize; const endIndex = startIndex + this.pageSize; return this.users.slice(startIndex, endIndex); }, }, methods: { // 切换到上一页 prevPage() { if (this.currentPage > 1) { this.currentPage--; } }, // 切换到下一页 nextPage() { if (this.currentPage < this.totalPage) { this.currentPage++; } }, // 设置当前页码 setCurrentPage(page) { this.currentPage = page; }, }, mounted() { // 获取所有用户数据 // 这里假设已经获取到了 users 数据 // 可以是从接口获取,或者直接写死的静态数据 this.users = [ { id: 1, name: "Tom", email: "tom@example.com", phone: "1234567890" }, { id: 2, name: "Jerry", email: "jerry@example.com", phone: "0987654321" }, // ... ]; }, }; </script> ``` 在这个示例中,我们首先定义了三个数据属性: - `users`:存放所有用户数据的数组。 - `currentPage`:当前页码。 - `pageSize`:每页数据量。 然后,我们定义了两个计算属性: - `totalPage`:根据 `users` 和 `pageSize` 计算出总页数。 - `pagedUsers`:根据 `currentPage` 和 `pageSize` 计算出当前页的用户数据。 最后,我们定义了三个方法: - `prevPage`:切换到上一页。 - `nextPage`:切换到下一页。 - `setCurrentPage`:设置当前页码。 在 `mounted` 钩子中,我们可以获取所有用户数据,这里简单地用静态数据来模拟。 在模板中,我们使用 `v-for` 指令来展示分页后的用户数据。同时,我们也使用了计算属性 `totalPage` 和 `pagedUsers` 来展示页码和分页后的用户数据。最后,我们使用了两个按钮来切换上一页和下一页,并展示了所有页码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值