How to implement simple paging function in vue
This article will explain in detail how to achieve a simple paging function in vue. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.
The details are as follows
We all know that paging can be achieved by installing pagehelper in a spring boot project, but paging can also be achieved at the front end in vue.
1. First, define the following variables in data:
Data () {return {list: null, listLoading: true, totalPage: 1, / total total number of pages, default is 1 currentPage: 1, / / current number of pages, default is 1 pageSize: 5, / / display quantity per page currentPageData: [], / / current page display content headPage: 1}}
2. Send a request to get the backend data (list collection)
Axios.get ('http://192.168.56.1:8081/sel/'+id).then((res) = > {console.log (res.data.data) that.list = res.data.data that.listLoading = false
3. Calculate the value of the variable in the data based on the length of the returned data list:
This.totalPage=Math.ceil (this.list.length / this.pageSize); this.totalPage= this.totalPage= = 0? 1: this.totalPage; this.getCurrentPageData ()
4. Call the getCurrentPageData () method to set the data of the current page
GetCurrentPageData () {let begin = (this.currentPage-1) * this.pageSize; let end = this.currentPage * this.pageSize; this.currentPageData = this.list.slice (begin, end) }
5. Add buttons and implement the functions of the home page, the last page, the previous page and the next page:
/ / previous page prevPage () {if (this.currentPage = = 1) {return false;} else {this.currentPage--; this.getCurrentPageData () }}, / / next page nextPage () {if (this.currentPage = = this.totalPage) {return false;} else {this.currentPage++ This.getCurrentPageData ();}}, / / last page lastPage () {if (this.currentPage= = this.totalPage) {return false;} else {this.currentPage=this.totalPage This.getCurrentPageData ();}}, / / Home firstPage () {this.currentPage= this.headPage; this.getCurrentPageData ();}
Be careful!
Finally, you need to modify the data in the component
Front-end display:
This is the end of this article on "how to achieve simple paging in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.
