Javascript 添加“的功能”；“下一页”；及；上一页“；按钮

我编写了这个json文件，其中包含一个表的信息

在我的表中，我只想在文件中显示最多5行数据

我希望用户单击next，它会显示数据中接下来的5个对象。 我似乎找不到一个可以自己使用的解决方案或方法。我使用NodeJS和ejs作为我的视图引擎

  <tbody>
    <% data.s_history.forEach((record) => { %>
    <tr>
      <td><%=record.date%>
          <span style="display: block;font-size:10pt;"><%=record.time%></span>
      </td>


      <td>
        <% record.course.forEach((course) => { %>
        <%=course.subject%>
          <span style="display:block;font-size: 10pt;"><%=course.class%></span>
        <% }) %>
      </td>

      <td>
        <input type="image" class="web_camera" src="/img/camera.png">
      </td>

      <td>
        <% record.session.forEach((session) => { %>
          <span><%=session.date%></span><img src="<%=session.course_type%>"></img>
          <p><%=session.details%></span>
        <% }) %>
      </td>

      <td>
        <% record.instructor.forEach((teacher) => {%>
          <img rel="tooltip" data-placement="top" title="<%=teacher.name%>" src="<%=teacher.img%>"></img>
        <% }) %>
      </td>

      <td>
        <% record.student.forEach((person) => { %>
          <img rel="tooltip" data-placement="top" title="<%=person.name%>" src="<%=person.img%>">
        <% }) %>
      </td>

      <td>
        <button data-toggle="modal" data-target="#MessageModal" rel="tooltip" data-placement="top" title="Send Message" class="record_icons"><img src="/img/message.png"></img></button>
        <button rel="tooltip" data-placement="top" title="Add Course" class="record_icons"><img src="/img/plus-course-record.png"></img></button>
        <a href='/student_grading' rel="tooltip" data-placement="top" title="Grading & Feedback"  class="record_icons"><img src="/img/nike.png"></img></a>
        <button data-toggle="modal" data-target="#ChangeModal" rel="tooltip" data-placement="top" title="Change Course" class="record_icons"><img src="/img/change.png"></img></button>
        <button data-toggle="modal" data-target="#CancelModal" rel="tooltip" data-placement="top" title="Cancel Course" class="record_icons"><img src="/img/x.png"></img></button>
      </td>
    </tr>
    <% }) %>
  </tbody>

{ %>
{ %>
{ %>
">

{%>
">
{ %>
">

---

请参阅我只想循环一定数量的数据。然后单击“下一个”或“上一个”时，它将传递下一组数据。

简单构建一个API，为客户端提供表详细信息。EJS页面将有一个空白表，并在页面加载时向API发起AJAX请求。您甚至可以显示一个加载程序，以获得丰富的用户体验。通过此您的页面加载速度将比当前实现快。

首先，您希望使用页面重新加载还是不使用页面重新加载（使用ajax）？不使用页面重新加载