js+vue前端分页处理

前端分页处理

最近经常遇到后端不能做分页处理,但是前端又需要分页查询的,emm。。。。一万只羊驼奔腾而过

 flipOver () {
      const pageSize = this.pageInfo.pageSize  // 每页条数
      const pageNo = this.pageInfo.pageNo // 当前页
      const arr = this.tableList// 要分页的arr
      var pagingNum = (pageNo- 1) * pageSize;
      var newArr =
        pagingNum + pageSize >= arr.length
          ? arr.slice(pagingNum , arr.length)
          : arr.slice(pagingNum , pagingNum + pageSize);
      this.detealis = newArr;
    }

vue中在查询接口内调用一次这个方法后,后面再分页方法内调用就行了

async getDataList() {
      // 获取列表信息
      this.loading = true;
      this.$API.onlineQueryPaybackHttp().then(result=>{
        const pageResult = result.pageResult || {}
        this.tableList= pageResult.records || []
        this.pageInfo.total = this.tableList.length;
        this.pageBreak()
        this.loading = false;
      }).catch(err=>{
        this.loading = false;
      })
 currentChange(pageNo) {
      this.pageNo = pageNo;
      this.flipOver()
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
实现分页操作需要前后端配合完成,下面给出一个简单的示例代码,供参考。 后端代码(基于Spring Boot): ```java @RestController @RequestMapping("/api") public class UserController { @Autowired private UserService userService; @GetMapping("/users") public Page<User> getUsers(@RequestParam(defaultValue = "0") int page, @RequestParam(defaultValue = "10") int size) { return userService.getUsers(PageRequest.of(page, size)); } } ``` 上述代码中,我们通过 `@GetMapping` 注解来映射请求路径 `/users`,并通过 `@RequestParam` 注解来接受前端传来的 `page` 和 `size` 参数,然后通过 `PageRequest` 对象来构建 `Pageable` 对象,最终返回一个 `Page<User>` 对象给前端前端代码(基于Vue.js): ```vue <template> <div> <table> <thead> <tr> <th>id</th> <th>name</th> <th>email</th> </tr> </thead> <tbody> <tr v-for="user in users" :key="user.id"> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td>{{ user.email }}</td> </tr> </tbody> </table> <nav> <ul class="pagination"> <li class="page-item" v-bind:class="{ disabled: page === 0 }"> <a class="page-link" href="#" @click.prevent="setPage(page - 1)">Previous</a> </li> <li class="page-item" v-for="pageNumber in totalPages" :key="pageNumber" v-bind:class="{ active: pageNumber === page }"> <a class="page-link" href="#" @click.prevent="setPage(pageNumber)">{{ pageNumber + 1 }}</a> </li> <li class="page-item" v-bind:class="{ disabled: page === totalPages - 1 }"> <a class="page-link" href="#" @click.prevent="setPage(page + 1)">Next</a> </li> </ul> </nav> </div> </template> <script> import axios from 'axios' export default { name: 'UserList', data() { return { users: [], page: 0, size: 10, totalPages: 0 } }, mounted() { this.getUsers() }, methods: { getUsers() { axios.get(`/api/users?page=${this.page}&size=${this.size}`) .then(response => { this.users = response.data.content this.totalPages = response.data.totalPages }) .catch(error => { console.log(error) }) }, setPage(pageNumber) { this.page = pageNumber this.getUsers() } } } </script> ``` 上述代码中,我们通过 `axios` 库来发起后端的请求,然后将返回的数据渲染到页面上,同时也实现了分页功能。 需要注意的是,这里的 `totalPages` 是根据后端返回的数据计算得出的,因此需要先发起一次请求来获取总页数。另外,这里使用了 Bootstrap 的分页样式,所以需要在页面中引入 Bootstrap 相关的 CSS 和 JS 文件。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

知所云

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值