一篇文章告诉你如何实现Vue前端分页和后端分页

更新时间:2023-04-04 09:14:01 阅读：评论：0

1：前端手写分页(数据量小的情况下)

前端需要使用slice截取： tabledata((page-1)pagesize,pagepagesize)

2：后端分页，前端只需要关注传递的page和pagesize

3：前端手写分页按钮

<body>  <div id="app">    <table class="table table-bordered table-condend">      <tr class="bg-primary">        <th class="text-center">排序</th>        <th class="text-center">用户姓名</th>        <th class="text-center">用户性别</th>        <th class="text-center">所在城市</th>      </tr>      <tr class="text-center active"  v-for="(v,i) in list" :key="i">  励志名言      <td>{{num(i)}}</td>        <!-- <td>{{params.pagesize}}</td> -->        <td>{{v.name}}</td>        <td>{{v.x}}</td>        <td>{{v.addr}}</td>      </tr>           </table>    <nav aria-label="page navigation" style="text-align: center;">      <ul class="pagination">        <!-- 上一页 -->        <li @click="prepage()" :class="{'disabled':params.page == 1}">          <a aria-label="previous">            <span aria-hidden="true">&laquo;</span>          </a>        </li>        <li :class="{'active': params.page == page}" v-for="(page,index) in pages" :key="index" @click="curpage(page)">          <a  style="cursor: pointer;">            {{page}}          </a>        </li>        <!-- 下一页 -->        <li :class="{'disabled':params.page == totalpage}" @click="next()">          <a aria-label="next">            <span aria-hidden="true">&raquo;</span>          </a>        </li>      </ul>    </nav>  </div></body>

window.onload = function () {  // 1s内只允许发送请求(出发事件)一次(可多次点击) 节流 throttle  new vue({    el: '#app',    data: {      params:{        page:1,        pagesize:20,        name妈妈我想对你说200字:''      },      list: [],      total:0,//总的条数      totalpage:0,//总的页数      flag: fal,    },    created() {      this.getdata()    },    computed: {      pages() {        let totalpage = this.totalpage;        let page = this.params.page;        // 总的页数小于10页        if(totalpage < 10) return totalpage;        // 总的页数大于10页添加省略号        if(page <= 5) { // 前五页          // (1) 页码小于5 左边显示六个          return [1,2,3,4,5,6,'...',totalpage]        } el if (page >= totalpage - 5) { // 后五页          console.log("触发")          // (2) 页码大于总页数-5 右边显示六个          return [1,'...',totalpage-5,totalpage-4,totalpage-3,totalpage-2,totalpage-1,totalpage]        } el { // 中间五页          // (3)页码在 5-（totalpage-5）之间 左边区间不能小于5  右边区间不能大于总页数totalpage，注意  左边的当前页-num 不能小于1， 右边的当前页+num不能大于总页数          return [1,'...',page-1,page,page+1,page+2,page+3,'...',totalpage]        }      },      num() {        let { pagesize, page} = this.params        // (1-1) * 10 + 10 + 0 + 1 = 1;        // (2-1) * 10 + 10 + 0 + 1 = 11         // 第一页 = (当前页 -1 )* 每页的条数 + 索引值 + 1 保证是从1开始的        return i => (page - 1) * pagesize + i + 1  // (当前页- 1 * 每页的条数) + 索引值 + 1      }    },    methods: {      getdata() {        if(this.flag) return;        this.flag = true;        // 下面就是相当于一个定时器        axios.get('http://localhost:3000/ur/listpage',{params:this.params}).then(res => {          console.log('res',res.data.urs)          let { total,urs } = res.data.urs;          this.total = total;          this.totalpage = math.ceil( this.total / this.params.pagesize);          this.list = u我可以抱你吗歌词rs          this.flag = fal;     欧洲气候特征   })      },      curpage(page) {        if(page == '...') return         if(this.flag) return;        this.params.page = page;        this.getdata()      },      prepage() {        // if(this.params.page == '...') return         if(this.params.page > 1) {          if(this.flag) return;          --this.params.page;          console.log('page',this.params.page)  3d版泰坦尼克号        this.getdata()        }      },      next() {        // if(this.params.page == '...') return         if(this.flag) return;        console.log("执行",this.totalpage)        if(this.params.page < this.totalpage) {          ++this.params.page;          console.log('page',this.params.page)          this.getdata()        }      },     }   })}