如何为HTML表格实现分页？要求每页显示10行

我是一名JavaScript新手，想给当前的HTML表格做分页，要求每页显示10行。试了好几种JS实现都没成，花了好多时间。

现有代码 #

HTML代码 #

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- link rel="stylesheet" href="table.css" /-->

<table class="table">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Birthday</th>
  </tr>
  <tbody id="myTable"> </tbody>
</table>

<div class="pagenumbers" id="pagination"></div>

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<!-- script src="table.js"></script -->

JavaScript代码 #

var data = [{
    "name": "Michael",
    "age": "30",
    "birthdate": "11/10/1989",
  },
  {
    "name": "Mila",
    "age": "32",
    "birthdate": "10/1/1989",
  },
  {
    "name": "Paul",
    "age": "29",
    "birthdate": "10/14/1990",
  },
  {
    "name": "Dennis",
    "age": "25",
    "birthdate": "11/29/1993",
  },
  {
    "name": "Tim",
    "age": "27",
    "birthdate": "3/12/1991",
  },
  {
    "name": "Erik",
    "age": "24",
    "birthdate": "10/31/1995",
  },

  {
    "name": "Mark",
    "age": "21",
    "birthdate": "10/30/1991",
  },
  {
    "name": "Cristi",
    "age": "20",
    "birthdate": "10/30/2002",
  },
  {
    "name": "Radu",
    "age": "31",
    "birthdate": "10/30/1990",
  },
  {
    "name": "Sarah",
    "age": "17",
    "birthdate": "08/11/2005",
  },
  {
    "name": "Anne",
    "age": "22",
    "birthdate": "10/30/2000",
  },
  {
    "name": "Mark",
    "age": "21",
    "birthdate": "10/30/1991",
  },
  {
    "name": "Cristi",
    "age": "20",
    "birthdate": "10/30/2002",
  },
  {
    "name": "Radu",
    "age": "31",
    "birthdate": "10/30/1990",
  },
  {
    "name": "Sarah",
    "age": "17",
    "birthdate": "08/11/2005",
  },
  {
    "name": "Anne",
    "age": "22",
    "birthdate": "10/30/2000",
  },
]

$(document).ready(function() {
  for (var i = 0; i < data.length; i++) {
    var row = `<tr>
      <td>${data[i].name}</td>
      <td>${data[i].age}</td>
      <td>${data[i].birthdate}</td>
    </tr>`
    $("#myTable").append(row);
  }
});

尝试过的失败代码 #

function SetupPaginatino(items, wrapper, rows, rows_per_page) {
  wrapper.innerHtml = " ";
  let page_count = Math.cell(items.length / rows_per_page)
  for (let i = 0; i < page_count + 1; i++) {
    PaginationButton(i);
    wrapper.appendChild(btn);
  }
}

可行的分页实现方案 #

你之前的代码存在几个明显错误：

• 函数名拼写错误：SetupPaginatino 应为 SetupPagination
• 数学方法错误：Math.cell 应为 Math.ceil
• DOM属性拼写错误：innerHtml 应为 innerHTML
• 未定义PaginationButton函数和btn变量

下面是整合后的完整可运行代码：

修改后的JavaScript代码 #

var data = [{
    "name": "Michael",
    "age": "30",
    "birthdate": "11/10/1989",
  },
  {
    "name": "Mila",
    "age": "32",
    "birthdate": "10/1/1989",
  },
  {
    "name": "Paul",
    "age": "29",
    "birthdate": "10/14/1990",
  },
  {
    "name": "Dennis",
    "age": "25",
    "birthdate": "11/29/1993",
  },
  {
    "name": "Tim",
    "age": "27",
    "birthdate": "3/12/1991",
  },
  {
    "name": "Erik",
    "age": "24",
    "birthdate": "10/31/1995",
  },
  {
    "name": "Mark",
    "age": "21",
    "birthdate": "10/30/1991",
  },
  {
    "name": "Cristi",
    "age": "20",
    "birthdate": "10/30/2002",
  },
  {
    "name": "Radu",
    "age": "31",
    "birthdate": "10/30/1990",
  },
  {
    "name": "Sarah",
    "age": "17",
    "birthdate": "08/11/2005",
  },
  {
    "name": "Anne",
    "age": "22",
    "birthdate": "10/30/2000",
  },
  {
    "name": "Mark",
    "age": "21",
    "birthdate": "10/30/1991",
  },
  {
    "name": "Cristi",
    "age": "20",
    "birthdate": "10/30/2002",
  },
  {
    "name": "Radu",
    "age": "31",
    "birthdate": "10/30/1990",
  },
  {
    "name": "Sarah",
    "age": "17",
    "birthdate": "08/11/2005",
  },
  {
    "name": "Anne",
    "age": "22",
    "birthdate": "10/30/2000",
  },
];

const rowsPerPage = 10;
let currentPage = 1;

$(document).ready(function() {
  // 渲染指定页的表格内容
  function renderTable(page) {
    $("#myTable").empty();
    const startIndex = (page - 1) * rowsPerPage;
    const endIndex = startIndex + rowsPerPage;
    const pageData = data.slice(startIndex, endIndex);
    
    pageData.forEach(item => {
      const row = `<tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.birthdate}</td>
      </tr>`;
      $("#myTable").append(row);
    });
  }

  // 生成分页按钮
  function setupPagination() {
    const paginationWrapper = $("#pagination");
    paginationWrapper.empty();
    const pageCount = Math.ceil(data.length / rowsPerPage);

    for (let i = 1; i <= pageCount; i++) {
      const button = $(`<button class="btn btn-sm btn-outline-primary mx-1">${i}</button>`);
      // 给当前页按钮添加激活样式
      if (i === currentPage) {
        button.addClass("btn-primary").removeClass("btn-outline-primary");
      }
      // 点击按钮切换页面
      button.click(function() {
        currentPage = i;
        renderTable(currentPage);
        // 更新按钮激活状态
        $("#pagination button").removeClass("btn-primary").addClass("btn-outline-primary");
        $(this).addClass("btn-primary").removeClass("btn-outline-primary");
      });
      paginationWrapper.append(button);
    }
  }

  // 初始化页面
  renderTable(currentPage);
  setupPagination();
});

功能说明 #

1. 拆分渲染表格和生成分页按钮的逻辑，代码结构更清晰
2. 使用Bootstrap按钮样式优化分页栏视觉效果
3. 自动高亮当前页的分页按钮
4. 切换页面时仅渲染对应页的数据行，避免一次性加载所有内容

内容的提问来源于stack exchange，提问作者sarah secara