前端分页和后端分页

前端分页

前端分页一般用于数据量较小的情况，一次请求把数据全部从后端请求回来。下面是vue-element-ui的分页组件写法：

<div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="activePage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="sizePerPage"
      layout="total, sizes, prev, pager, next, jumper"
      :total="contactsInfo.length">
    </el-pagination>
  </div>
  <script>
  export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.activePage = 1;
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
    data() {
      return {
        activePage: 4
      };
    }
  }

需要注意的是：

• 当前页展示的数据与总数据的关系

let show = this.contactsInfo.slice(this.sizePerPage * (this.activePage - 1), this.sizePerPage * (this.activePage));

• 当每页条数改变时，当前页设置为首页。防止每页条数变大时，当前页时不存在的页数。

后端分页

后端分页适用于数据量偏大时的情况，减小请求传输压力。前端需要将每页条数和当前页传给后端，后端根据条件查询出数据再传给前端，包括总条数、当前页、每页多少条数据等。

• 前端显示的当前页和每页多少条数据由后端传回的数据决定，否则出现改变前端参数，还未发请求时，页码的错乱。
• 当改变每页多少条时，当前页参数置为首页。

vue-element-ui分页组件
react-bootstrap分页组件