Record the use of reduce in array, and simply implement a DOM with paging table

 

Two days ago, I saw a video chat and found out the method of reduce array. After a brief look at what others wrote, I thought it was a good way to use this method to render data, so I wrote a small DOM for fun.

Let's talk about the reduce method of arrays

Let's take a picture

According to the above figure, two parameters are passed in the reduce method. The first parameter is a method, and there are four parameters in the method: respectively representing

1. initial value. (that is to say, the return value at the beginning of this method is related to the second parameter of the reduce method, which I usually set to null.)

2. The current element is equivalent to traversing the array to get the value of each subscript

3. Array index

4. The current array (I don't think it can be used in general)

The above is the parameter meaning of the first parameter function of the reduce method.

The second parameter of the reduce method is the initial value of the method, that is, the initial value when the method is first entered.

After the introduction of the method, the process of using the method is as follows:

html part code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>arr method</title>
  <style>
    .tableBox{
      height: 363px;
    }
    table td{
      border-bottom: 1px solid #000;
      text-align: center;
      line-height: 30px;
    }
    .operation{
      width: 500px;
      overflow: hidden;
      margin: 20px auto 0;
    }
    #pre,#next{
      vertical-align: middle;
    }
    #opsBtn{
      margin: 0;
      padding: 0;
      display: inline-block;
    }
    #opsBtn li{
      list-style: none;
      display: inline-block;
    }
    .pageBtn{
      vertical-align: middle;
      width: 23px;
      height: 23px;
      margin-left: 5px;
      margin-right: 5px;
    }
    /*.pageBtn:first-child{
      margin-left: 0;
    }*/
  </style>
</head>
<body>
<div class="box">
  <div class="tableBox">
    <table cellspacing="0" width="500px" align="center">
      <thead>
      <tr>
        <td>number</td>
        <td>full name</td>
        <td>Gender</td>
      </tr>
      </thead>
      <tbody id="tb"></tbody>
    </table>
  </div>
  <div class="operation">
    <button id="pre">previous page</button>
    <ul id="opsBtn"></ul>
    <button id="next">next page</button>
  </div>
</div>
<script src="sortAndFilter.js"></script>
<script src="reduceMethod.js"></script>
</body>
</html>

The html part simply writes some styles, which looks a little better.

Here is the main js code:

// data source
let responseData = [
  {
    id: 1,
    name: 'z1',
    sex: 1
  },
  {
    id: 2,
    name: 'z2',
    sex: 1
  },
  {
    id: 3,
    name: 'z3',
    sex: 0
  },
  {
    id: 4,
    name: 'z4',
    sex: 0
  },
  {
    id: 5,
    name: 'z5',
    sex: 0
  },
  {
    id: 6,
    name: 'z6',
    sex: 1
  },
  {
    id: 7,
    name: 'z7',
    sex: 0
  },
  {
    id: 8,
    name: 'z8',
    sex: 1
  },
  {
    id: 9,
    name: 'z9',
    sex: 0
  },
  {
    id: 10,
    name: 'z10',
    sex: 0
  },
  {
    id: 11,
    name: 'z11',
    sex: 0
  },
  {
    id: 12,
    name: 'z12',
    sex: 0
  },
  {
    id: 13,
    name: 'z13',
    sex: 0
  },
  {
    id: 14,
    name: 'z14',
    sex: 1
  },
  {
    id: 15,
    name: 'z15',
    sex: 0
  },
  {
    id: 16,
    name: 'z16',
    sex: 0
  },
  {
    id: 17,
    name: 'z17',
    sex: 0
  },
  {
    id: 18,
    name: 'z18',
    sex: 1
  },
  {
    id: 19,
    name: 'z19',
    sex: 1
  },
  {
    id: 20,
    name: 'z20',
    sex: 0
  },
  {
    id: 21,
    name: 'z21',
    sex: 0
  },
  {
    id: 22,
    name: 'z22',
    sex: 1
  },
  {
    id: 23,
    name: 'z23',
    sex: 1
  },
  {
    id: 24,
    name: 'z24',
    sex: 0
  },
  {
    id: 25,
    name: 'z25',
    sex: 0
  },
  {
    id: 26,
    name: 'z26',
    sex: 0
  },
];
var page = 1; // Define global page number
var rows = 10; // Define how many pieces of data are displayed on the global page
var total = responseData.length; // Define the total number of data
var str = ''; // Define an empty string to use when rendering a table
var str1 = ''; // Define an empty string to use when rendering list buttons
const tb = document.getElementById('tb'); // Get table tbody
const pre = document.getElementById('pre'); // Get previous page click button
const next = document.getElementById('next'); // Get next page click button
const opsBtn = document.getElementById('opsBtn'); // Get ul in page number

// Page click event
function clickPageNum(e) {
  page = Number(e.innerText)
  turnPage(responseData)
}
// How to render data
function renderData(arrData) {
  str = arrData.reduce(function (preVal, currentVal, currentI, arr) {
    return preVal +
      `<tr>
      <td>${currentVal.id}</td>
      <td>${currentVal.name}</td>
      <td>${currentVal.sex ? 'male' : 'female'}</td>
    </tr>`
  }, '');
  tb.innerHTML = str;
}
// How to turn page codes
function turnPage (pageData) {
  let newData = pageData.filter(function (item, index) {
    return index >= (page - 1) * rows && index < page * rows
  });
  renderData(newData)
}
turnPage(responseData);

(function () {
  // Generate page number
  for (let i = 0; i < Math.ceil(total / rows); i++) {
    str1 = str1 += `<li>
                      <button class="pageBtn" onclick="clickPageNum(this)">${i + 1}</button>
                    </li>`
  }
  opsBtn.innerHTML = str1
// Previous click event
  pre.onclick = function () {
    if (page === 1) {
      alert('It's the first page')
    } else {
      page--;
      turnPage(responseData)
    }
  };
// Next click event
  next.onclick = function () {
    if (page === Math.ceil(total / rows)) {
      alert('It's the last page')
    } else {
      page++;
      turnPage(responseData)
    }
  };
})();

I think the reduce method is really easy to use, rendering is relatively simple, with Template Strings, it is also an efficient rendering.

Although it's just a simple small dom function, what can be improved better? Welcome to leave a message and tell me~~

Posted on Fri, 19 Jun 2020 06:40:04 -0400 by Henaro