【问题标题】：Functionality to add a "next page" and "previous page" button添加“下一页”和“上一页”按钮的功能
【发布时间】：2018-09-26 12:04:44
【问题描述】：

我编写了这个包含表格信息的 json 文件。

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

我希望用户单击下一步，它会显示数据中接下来的 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>

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

【问题讨论】：

首先你想要页面重新加载还是不页面重新加载（使用 ajax）？
无需重新加载页面

标签： javascript jquery node.js ejs

【解决方案1】：

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

【讨论】：