Pure front end paging (facing the back end students do not return paging data, only return all data, you panic?)

1. Occurrence scenario.

Life is uncertain, the large intestine wrapped in the small intestine. Which day end child boots in a bad mood, greedy for their own temporary cool, in the original business with the same list interface not according to the common sense card, not according to the paging parameters to data, but a one-time return list of all the data, so that you can paging processing. Did you panic? Of course, under normal circumstances, this scenario does not happen, but if it does, as a professional front, we must know how to deal with it in a clever way, in addition to the inner mouth of fragrance. Maybe you don’t know how to resolve this crisis before, but I believe that reading this article, in the face of this situation, you can say loudly: don’t panic!

2. Usage.

2-1. Under normal circumstances, the separation of front and back end project, to form more than class data, handed the current page is the front page and the size of the current page size to the background, the background to these fields paging data returned (namely front-end move a page will send a request to the current page of data, this part of the application described here no longer tired).

2-2. In special cases, the background does not deal with paging, but only returns all data together at the time of request. At this time, the front end students need to deal with paging by themselves.

3. Handling ideas.

The front end sends the request to get all the data → the data is processed → the paging component is completed

4. Core methods.

The data processing here is of course the shredding of all the list data arrays into small arrays of the desired length. Without further ado, go directly to the code (all annotated) and renderings.

GetNeedArr (array, size) {// Get the desired length split array; Const length = array.length; const length = array.length; If (! = 1) if (! = 1) length || ! size || size < 1) { return []; } // let index = 0; Start let resIndex = 0; // Calculate the length of the output array based on length and size, and create it. let result = new Array(Math.ceil(length / size)); While (index < length) {// Set result[0] and result[1]. This value is obtained from array.slice. result[resIndex++] = array.slice(index, (index += size)); } // Output new array return result; },Copy the code

5. Combine component library to simulate the development effect of real environment.

<template> <div class="home"> <el-table :data="tableData" style="width: <el-table-column prop="id" label=" id" width="180"></el-table-column> <el-table-column prop="phone" label=" phone" Width ="180"></el-table-column> <el-table-column prop="userName" label=" userName" ></el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 30, 50, 100]" :page-size="20" layout="total, sizes, prev, pager, next, jumper" :total="total" > </el-pagination> </div> </template> <script> import * as API from "@/api/pageRequest/home.js"; Export default {name: "Home", data() {return {currentPage: 1, // currentPage total: null, // total: null, [], // tableData: [], // pageSize: 20, // current pageSize}; }, methods: {handleSizeChange(val) {this.currentPage = 1; this.pageSize = val; this.getList(); }, handleCurrentChange(val) {this.currentPage = val; this.getList(); Then ((res) => {this.list = res.data.data;}, getList() {this.list = res.data.data; This. total = res.data.data.length; This.tabledata = this.getneedarr (this.list, this.pagesize)[this.currentpage-1] // tableData for the currentPage console.log(this.tableData); }); }, getNeedArr(array, size) {// Get the desired length split array; Const length = array.length; const length = array.length; If (! = 1) if (! = 1) length || ! size || size < 1) { return []; } // let index = 0; Start let resIndex = 0; // Calculate the length of the output array based on length and size, and create it. let result = new Array(Math.ceil(length / size)); While (index < length) {// Set result[0] and result[1]. This value is obtained from array.slice. result[resIndex++] = array.slice(index, (index += size)); } // Output new array return result; }, }, created() { this.getList(); }}; </script>Copy the code

6. Summary.

Boy’s boots, did you get it? Do you still panic when you are faced with unreasonable back end students who refuse to cooperate with list pagination again? Believe you now the answer nature is not panic! Five words floated from the sky — it was no matter.