Question

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

在我的表中，我想只在文件中显示最多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>

请参阅我只想循环浏览一定数量的数据。然后，当单击下一个或上一个时，它将通过下一个集合。

Answer 1

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

功能添加＆＃34;下一页＆＃34;和＆＃34;前一页＆＃34;按键

1 个答案: