Detailed explanation of the steps to implement paging components in VUE

This time I will bring you a detailed explanation of the steps to implement the paging component in VUE. What are the precautions for VUE to implement the paging component. The following is a practical case, let's take a look.

Paging is a very common function in WEB development, especially today when various front-end and back-end are separated. The back-end API returns data, and the front-end calculates the paging page number based on the count of the data and the current page number pageIndex. Rendering to the page is already a very common and common function. From the earliest jquery era to the current era of various front-end frameworks, pagination function is indispensable.

In most cases (basically) paging is the processing of asynchronous data lists. Here we first need to understand the paging process.

When the amount of data displayed on each page pageSize and the current page number pageIndex are known:

• Request the API and return the first screen data (within pageSize) and the total data count of all related conditions

• Pass the total amount of data to the page component to calculate the page number and render it on the page

  
  

• Click on the page number, send a request to obtain the data of the page number, and return the total data count and the data entries under the page number.

  
  

Due to changes in the conditions for obtaining data (assuming it is a search and the keywords change), the count is uncertain; or there is a select drop-down box to control the amount of data displayed on each page pageSize. When it changes, the total page number is certain It also needs to change. Therefore, in many cases it is necessary to recalculate the page number and render it.

After understanding the process, it becomes simple to implement a paging component in Vue.

Simple processing, the style is similar to bootstrap's paging component. On the first page, the previous page and home page buttons are disabled; on the last page, the next page and last page buttons are disabled; out-of-range page numbers are replaced with... , the renderings are as follows:

Due to changes in the conditions for obtaining data (assuming it is a search and the keywords change), the count is uncertain; or there is a select drop-down box to control the amount of data displayed on each page pageSize. When it changes, the total page number is certain It also needs to change. Therefore, in many cases it is necessary to recalculate the page number and render it.

After understanding the process, it becomes simple to implement a paging component in Vue.

Simple processing, the style is similar to bootstrap's paging component. On the first page, the previous page and home page buttons are disabled; on the last page, the next page and last page buttons are disabled; out-of-range page numbers are replaced with... , the renderings are as follows:

Pagination component
template

<template>
  <ul class="mo-paging">
    <!-- prev -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--prev&#39;, {&#39;paging-item--disabled&#39; : index === 1}]" @click="prev">prev</li>
    <!-- first -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--first&#39;, {&#39;paging-item--disabled&#39; : index === 1}]" @click="first">first</li>
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--more&#39;]" v-if="showPrevMore">...</li>
    <li :class="[&#39;paging-item&#39;, {&#39;paging-item--current&#39; : index === pager}]" v-for="pager in pagers" @click="go(pager)">{{ pager }}</li>
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--more&#39;]" v-if="showNextMore">...</li>
    <!-- last -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--last&#39;, {&#39;paging-item--disabled&#39; : index === pages}]" @click="last">last</li>
    <!-- next -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--next&#39;, {&#39;paging-item--disabled&#39; : index === pages}]" @click="next">next</li>
  </ul>
</template>

style(scss)

.mo-paging {
  display: inline-block;
  padding: 0;
  margin: 1rem 0;
  font-size: 0;
  list-style: none;
  user-select: none;
  > .paging-item {
    display: inline;
    font-size: 14px;
    position: relative;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-left: -1px;
    cursor: pointer;
    color: #0275d8;
    &:first-child {
      margin-left: 0;
    }
    &:hover {
      background-color: #f0f0f0;
      color: #0275d8;
    }
    &.paging-item--disabled,
    &.paging-item--more{
      background-color: #fff;
      color: #505050;
    }
    //禁用
    &.paging-item--disabled {
      cursor: not-allowed;
      opacity: .75;
    }
    &.paging-item--more,
    &.paging-item--current {
      cursor: default;
    }
    //选中
    &.paging-item--current {
      background-color: #0275d8;
      color:#fff;
      position: relative;
      z-index: 1;
      border-color: #0275d8;
    }
  }
}

javascript

export default {
  name : 'MoPaging',
  //通过props来接受从父组件传递过来的值
  props : {
 
    //页面中的可见页码，其他的以...替代, 必须是奇数
    perPages : { 
      type : Number,
      default : 5 
    },
 
    //当前页码
    pageIndex : {
      type : Number,
      default : 1
    },
 
    //每页显示条数
    pageSize : {
      type : Number,
      default : 10
    },
 
    //总记录数
    total : {
      type : Number,
      default : 1
    },
 
  },
  methods : {
    prev(){
      if (this.index > 1) {
        this.go(this.index - 1)
      }
    },
    next(){
      if (this.index < this.pages) {
        this.go(this.index + 1)
      }
    },
    first(){
      if (this.index !== 1) {
        this.go(1)
      }
    },
    last(){
      if (this.index != this.pages) {
        this.go(this.pages)
      }
    },
    go (page) {
      if (this.index !== page) {
        this.index = page
        //父组件通过change方法来接受当前的页码
        this.$emit(&#39;change&#39;, this.index)
      }
    }
  },
  computed : {
 
    //计算总页码
    pages(){
      return Math.ceil(this.size / this.limit)
    },
 
    //计算页码，当count等变化时自动计算
    pagers () {
      const array = []
      const perPages = this.perPages
      const pageCount = this.pages
      let current = this.index
      const _offset = (perPages - 1) / 2
 
 
      const offset = {
        start : current - _offset,
        end  : current + _offset
      }
 
      //-1, 3
      if (offset.start < 1) {
        offset.end = offset.end + (1 - offset.start)
        offset.start = 1
      }
      if (offset.end > pageCount) {
        offset.start = offset.start - (offset.end - pageCount)
        offset.end = pageCount
      }
      if (offset.start < 1) offset.start = 1
 
      this.showPrevMore = (offset.start > 1)
      this.showNextMore = (offset.end < pageCount)
 
      for (let i = offset.start; i <= offset.end; i++) {
        array.push(i)
      }
 
      return array
    }
  },
  data () {
    return {
      index : this.pageIndex, //当前页码
      limit : this.pageSize, //每页显示条数
      size : this.total || 1, //总记录数
      showPrevMore : false,
      showNextMore : false
    }
  },
  watch : {
    pageIndex(val) {
      this.index = val || 1
    },
    pageSize(val) {
      this.limit = val || 10
    },
    total(val) {
      this.size = val || 1
    }
  }
}

Use

<template>
  <p class="list">
    <template v-if="count">
      <ul>
        <li v-for="item in items">...</li>
      </ul>
      <mo-paging :page-index="currentPage" :totla="count" :page-size="pageSize" @change="pageChange">
      </mo-paging>
    </template>
  </p>
</template>
<script>
  import MoPaging from './paging'
  export default {
    //显示的声明组件
    components : {
      MoPaging 
    },
    data () {
      return {
        pageSize : 20 , //每页显示20条数据
        currentPage : 1, //当前页码
        count : 0, //总记录数
        items : []
      }
    },
    methods : {
      //获取数据
      getList () {
        //模拟
        let url = `/api/list/?pageSize=${this.pageSize}¤tPage=${this.currentPage}`
        this.$http.get(url)
        .then(({body}) => {
 
          //子组件监听到count变化会自动更新DOM
          this.count = body.count
          this.items = body.list
        })
      },
 
      //从page组件传递过来的当前page
      pageChange (page) {
        this.currentPage = page
        this.getList()
      }
    },
    mounted() {
      //请求第一页数据
      this.getList()
    } 
  }
</script>

in the parent component. I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the scrolling behavior of Vue-Router

How to use the Particles.js library in vue

BootStrap operation data table

The above is the detailed content of Detailed explanation of the steps to implement paging components in VUE. For more information, please follow other related articles on the PHP Chinese website!