Shulou(Shulou.com)06/01 Report--

This article is about how Vue+ElementUI implements the paging function to query mysql data. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. problem

When there is a lot of data in the database, it is necessary to query only part of it at a time to relieve the pressure on the server and the page. Here, we use the Pagination paging component of elementui, together with the limit statement of mysql, to query mysql data by paging.

The following figure is the most basic paging style:

Of course, it is necessary to introduce corresponding events to query the database when the page changes.

two。 Solve

2.1 paging component

Data: the total number of initialized data entries (total) is 1, which means the current number of pages is the first page.

2.2 function to obtain database data: getData ():

The parameter is offset,limit. Request the data from the backend and explain it later. The qs serialization parameter is used here. You can refer to my other blog post: Vue + ElementUI + Viewer after turning the page the picture can not preview the asynchronous communication problem of Vue parent and son components. It explains the function of qs.

GetData (offset,limit) {this.axios.post ('/ php/select.php', qs.stringify ({offset: offset,limit: limit, type: 'lost and found'}), {headers: {'Content-Type':' application/x-www-form-urlencoded'}}). Then ((res) = > {if (res.data = 0) {this.total = 0 This.list = []; return;} this.total = res.data.total this.list = res.data.data this.loading = false}) .catch ((err) = > {this.$message.error (err)})} 2.3 Page loading is complete, and you need to request the data of the first page created () {this.getData (0L8);}

The page change triggers the handleCurrentChange () function, that is, click to turn the page, where the val parameter is the current number of pages and the new parameter is used.

Call getData to query the data of different pages:

HandleCurrentChange (val) {this.list = [] / / clear the previous page of data this.getData ((val-1) * 8);}

Here is the back-end data: php + mysql

There are now a total of 10 pieces of data in the data table:

The select.php file requested by the frontend getData

Select.php:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.