td表格显示一页20个数据 用JavaScript实现一个简单的

<p>分页器</td></p>
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>30</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Bob</td>
      <td>20</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Sarah</td>
      <td>35</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Tom</td>
      <td>28</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Alice</td>
      <td>22</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Mike</td>
      <td>32</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Lisa</td>
      <td>27</td>
    </tr>
    <tr>
      <td>9</td>
      <td>David</td>
      <td>29</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Emily</td>
      <td>26</td>
    </tr>
    <tr>
      <td>11</td>
      <td>Mark</td>
      <td>24</td>
    </tr>
    <tr>
      <td>12</td>
      <td>Julie</td>
      <td>31</td>
    </tr>
    <tr>
      <td>13</td>
      <td>Adam</td>
      <td>23</td>
    </tr>
    <tr>
      <td>14</td>
      <td>Grace</td>
      <td>33</td>
    </tr>
    <tr>
      <td>15</td>
      <td>Paul</td>
      <td>21</td>
    </tr>
    <tr>
      <td>16</td>
      <td>Olivia</td>
      <td>34</td>
    </tr>
    <tr>
      <td>17</td>
      <td>Sam</td>
      <td>25</td>
    </tr>
    <tr>
      <td>18</td>
      <td>Lucy</td>
      <td>30</td>
    </tr>
    <tr>
      <td>19</td>
      <td>Max</td>
      <td>28</td>
    </tr>
    <tr>
      <td>20</td>
      <td>Anna</td>
      <td>26</td>
    </tr>
  </tbody>
</table>
<div id="pagination"></div>
<script>
  const data = [
    { id: 1, name: 'John', age: 25 },
    { id: 2, name: 'Jane', age: 30 },
    { id: 3, name: 'Bob', age: 20 },
    { id: 4, name: 'Sarah', age: 35 },
    { id: 5, name: 'Tom', age: 28 },
    { id: 6, name: 'Alice', age: 22 },
    { id: 7, name: 'Mike', age: 32 },
    { id: 8, name: 'Lisa', age: 27 },
    { id: 9, name: 'David', age: 29 },
    { id: 10, name: 'Emily', age: 26 },
    { id: 11, name: 'Mark', age: 24 },
    { id: 12, name: 'Julie', age: 31 },
    { id: 13, name: 'Adam', age: 23 },
    { id: 14, name: 'Grace', age: 33 },
    { id: 15, name: 'Paul', age: 21 },
    { id: 16, name: 'Olivia', age: 34 },
    { id: 17, name: 'Sam', age: 25 },
    { id: 18, name: 'Lucy', age: 30 },
    { id: 19, name: 'Max', age: 28 },
    { id: 20, name: 'Anna', age: 26 },
  ];
  
  const itemsPerPage = 5;
  const totalPages = Math.ceil(data.length / itemsPerPage);
  
  const pagination = document.getElementById('pagination');
  
  for (let i = 1; i <= totalPages; i++) {
    const pageButton = document.createElement('button');
    pageButton.textContent = i;
    pageButton.addEventListener('click', () => {
      const start = (i - 1) * itemsPerPage;
      const end = start + itemsPerPage;
      const pageData = data.slice(start, end);
      updateTable(pageData);
    });
    pagination.appendChild(pageButton);
  }
  
  function updateTable(pageData) {
    const tableBody = document.querySelector('tbody');
    tableBody.innerHTML = '';
    
    for (let i = 0; i < pageData.length; i++) {
      const row = document.createElement('tr');
      row.innerHTML = `
        <td>${pageData[i].id}</td>
        <td>${pageData[i].name}</td>
        <td>${pageData[i].age}</td>
      `;
      tableBody.appendChild(row);
    }
  }
  
  const startData = data.slice(0, itemsPerPage);
  updateTable(startData);
</script>
<p>This JavaScript code creates a simple pagination system for a table with 20 rows of data. The table displays 5 rows per page, and the pagination system consists of a series of buttons that allow the user to navigate between pages.</p>
<p>The code first defines an array of data objects, each representing a row in the table. It then calculates the total number of pages based on the number of items per page and the total number of data items.</p>
<p>Next, the code creates the pagination buttons by looping through the total number of pages and creating a button for each page. Each button is given a click event listener that updates the table with the appropriate data for that page.</p>
<p>The updateTable function takes an array of data items and updates the table with the corresponding rows. It first clears the table body and then loops through the data items, creating a row for each item and appending it to the table body.</p>
<p>Finally, the code initializes the table by displaying the first page of data.</p>