How to realize Vue front-end paging and back-end paging

This article introduces the relevant knowledge of "how to achieve Vue front-end paging and back-end paging". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1: front-end handwritten paging (in the case of small amount of data)

The frontend needs to use slice to intercept: tableData ((page-1) pageSize,pagepageSize)

2: back-end paging The front end only needs to pay attention to the passed page and pageSize3: the front end handwritten paging button sorts the user name, user gender city {{num (I)} {{v.name}} {{v.sex}} {{v.addr}} «{{page}} »_ window.onload = function () {/ / 1s only allowed to send Request (departure event) once (can be clicked multiple times) throttling throttle new Vue ({el:'# app' Data: {params: {page:1, pagesize:20, name:''}, list: [], Total number of total:0,// totalPage:0,// Total number of pages flag: false,}, created () {this.getData ()}, computed: {pages () {let totalPage = this.totalPage Let page = this.params.page; / / the total number of pages is less than 10 pages if (totalPage

< 10) return totalPage; // 总的页数大于10页添加省略号 if(page = totalPage - 5) { // 后五页 console.log("触发") // (2) 页码大于总页数-5 右边显示六个 return [1,'...',totalPage-5,totalPage-4,totalPage-3,totalPage-2,totalPage-1,totalPage] } else { // 中间五页 // (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 / (current page-1 * number of entries per page) + index value + 1}}, methods: {getData () {if (this.flag) return; this.flag = true / / the following is equivalent to a timer axios.get ('http://localhost:3000/user/listpage',{params:this.params}).then(res = > {console.log (' res',res.data.users) let {total,users} = res.data.users; this.total = total; this.totalPage = Math.ceil (this.total / this.params.pagesize)) This.list = users this.flag = false;})}, 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) this.getData ()}}, next () {/ / if (this.params.page = ='...') Return if (this.flag) return; console.log ("execute", this.totalPage) if (this.params.page < this.totalPage) {+ + this.params.page; console.log ('page',this.params.page) this.getData ()}},}})}

"how to achieve Vue front-end paging and back-end paging" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!