Today we will briefly introduce how element pagination is implemented. First, we will talk about the feeling. We have been using jQuery pagination before, in fact, it is not all, the essence of the use of BootStrapUI pagination, you can read my previous article, there is about this, here will not do any repetition. So this principle is really too easy after the use of element pagination, simple writing does not even have a sense of accomplishment. No BB, we look at the effect and code!

Effect:

Let’s see how simple the code is:

H5 :(write to the appropriate Html location)

 <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pagesize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
Copy the code

Date :(write to return)

CurrentPage :1, pagesize:10, total: 0,Copy the code

JS :(write inside method)

 / * * *@handleSizeChange  Click the function triggered when setting the number of pages to display (this feature is not currently available) *@handleCurrentChange Function * that fires when a page number is clicked@param Size Number of pages displayed on each page *@param CurrentPage indicates the currentPage */
      handleSizeChange: function (size) {
        this.pagesize = size;
        console.info(size)
      },
      handleCurrentChange: function(currentPage){
        let that = this;
        let url = 'http://'+that.url+'/breakfast/? page='+currentPage+' ';
        that.currentPage = currentPage;
         this.$axios({
           method : 'get'.url : url,
         }).then(function (res) {
            that.tableData = res.data.results;
         }).catch(function (err) {
            console.info(err);
         })
        console.info(currentPage)
      }
Copy the code

Here is an introduction:

The first event

size-change
Copy the code

This event is triggered when the pageSize changes. What is pageSize? In human language, how many pages of data are displayed on each page, which can be adapted to some situations, that is, when the user’s computer is large and he wants to see a lot of data on a page, he can input the corresponding pagesize

Second event

current-change
Copy the code

In fact, it is enough to use this event, because this event is triggered when the page number changes, so the core of doing pagination is this event, the specific how to use the above has been written examples, not to repeat!

As for the official gave the other two events are a prev – click another is next – click the two is when the user clicks on the previous page or a page after the trigger event, that actually makes little sense, after all, either click on the previous page or the page number will change, it will trigger the second event, the result is the same, It should be noted that do not forget to reset the bound data after each data acquisition, otherwise the data will not be the latest.

Because this itself is relatively simple operation, here will not do too much tautology, like friends can pay attention to, I am a new person, not too advanced operation, but the basic are still slowly learning, can communicate with!