js array according to the specified number of cutting

Part.1 problem

When writing project, the front face need to do  fake pagination  problem: the back-end data will all return to, their own front-end pagination

Part.2 ideas

Get the full return of the rear end of the data, in accordance with demand  paging, such as 10 per data, for example, all the data will need to be divided for each of a small array 10, and then combined into a large array, then in accordance with index values

For example Part.3

We assume that this is all the data returned by the backend

ARR: [ 
               {name: 'Bob', age: 20 is }, 
               {name: 'red', age: 21 is }, 
               {name: 'small army', age: 22 is }, 
               {name: 'Wang', age : 23 is }, 
               {name: 'Xiaozhu', Age: 24 }, 
               {name: 'Liu', Age: 25 }, 
               {name: 'Zhang', Age: 26 is }, 
               {name: 'small Pang' , Age: 27 }, 
               {name: 'millet', Age: 28 }, 
               {name: 'Xiaohua', Age: 29 }, 
               {name:'Xiao Zheng', age: 30}, 
               {Name: 'Small blue', age: 31 is }, 
               {name: 'Small green', age: 32 }, 
               {name: 'Little Green', age: 33 is }, 
               {name: 'white', age : 34 is }, 
               {name: 'black', Age: 35 }, 
               {name: "small orange ', Age: 36 }, 
               {name: ' small purple ', Age: 37 [ }, 
               {name: ' hill ', Age: 38 is }, 
               {name: 'a small', Age: 39 }, 
               {name: 'Xiaopeng', Age: 40 }, 
               {name:'Small cluster', age: 41}, 
               {Name: 'fish', age: 42 is }, 
               {name: 'Li', age: 43 is }, 
               {name: 'Little Britain', age: 44 is }, 
               {name: 'Jill', age : 45 }, 
               {name: 'statuette', age: 46 is }, 
               {name: 'small window', age: 47 }, 
               {name: 'leaflets', age: 48 }, 
               {name: 'small packets', age : 49 }, 
               {name: 'tiger', Age: 50 }, 
               {name: 'small pure', Age: 51 is }, 
               {name:'Xiaowei', age: 52}, 
               {Name: 'little good', age: 53 is }, 
               {name: 'Xiao Wu', age: 54 is }, 
               {name: 'small pieces', age: 55 }, 
               {name: 'Ohara', age: 56 is }, 
               {name: 'small letter', age: 57 is }, 
               {name: 'small river', age: 58 }, 
               {name: 'small Yan', age: 59 }, 
               {name: 'small contingent', age : 60 } 
],

First, create an empty array, an array of small reception for the completion of the division

 Newark: []

The page is then 10 divides Article

 dataHandling: function() {
       let arrLength = this.arr.length; // 数组长度
       let num = 10;  // 每页显示 10 条
       let index = 0;
       for (let i = 0; i < arrLength; i++) {
            if (i % num === 0 && i !== 0) { // 可以被 10 整除
                 this.newArr.push(this.arr.slice(index, i));
                 index = i;
             };
             if ((i + 1) === arrLength) {
                  this.newArr.push(this.arr.slice(index, (i + 1)));
             }
       };
  }

The results are as follows:

The data is divided became 5 small array, each small array of 10 data, and in accordance with the paging operation to take  the index of the array (newArr) is  to complete the value, the paging operation to achieve false! ~ ~ ~

 

 

Guess you like

Origin www.cnblogs.com/langxiyu/p/10929722.html