Question

我有一个模板，我运行来自本地JSON文件的一些数据。

<tbody>
    <% data.t_upcoming.forEach((record) => { %>
    <tr>
      <td><%=record.date%>
          <span style="display: block;font-size:10pt;"><%=record.time%></span>
          <p class="timer" style="font-size: 8pt; color: red;"></p>
      </td>

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

      <td><a style="color:black;" href='/course-description'><%=record.course%></a>

        <span style="display:block;font-size:10pt;"><%=record.course_type%></span>
      </td>
      <td>
        <% record.student.forEach((person) => { %>
          <img rel="tooltip" data-placement="top" title="<%=person.name%>" src="<%=person.image%>">
        <% }) %>
      </td>

      <td>Recieved
        <span style="display:block; font-size: 16pt; color:#7c0000;"><%=record.status%></span>
      </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>

这是我的Json文件供参考

{
  "t_upcoming": [{
    "id": 1,
    "date": "April 24, 2018 14:53:25",
    "time": "2 to 4pm",
    "status":"$45",
    "course": "Oil Painting",
    "course_type": "(Individual)",
    "student":[
      {
        "name": "Ann Perkins",
        "image": "/img/student-icon.png"
      }
    ],
    "completion": "Completed"
  },{
    "id": 2,
    "date": "April 23, 2018 16:37:25",
    "time": "2 to 4pm",
    "status":"$45",
    "course": "Art",
    "course_type": "(Group)",
    "student":[
      {
        "name": "Ann Perkins",
        "image": "/img/student-icon.png"
      },
      {
        "name": "Ann Perkins",
        "image": "/img/student-icon.png"
      },
      {
        "name": "Ann Perkins",
        "image": "/img/student-icon.png"
      }
    ],
    "completion": "Completed"
  },{
    "id": 3,
    "date": "April 22, 2018 15:37:25",
    "time": "2 to 4pm",
    "status":"$45",
    "course": "Algebra",
    "course_type": "(Group)",
    "student":[
      {
        "name": "Ann Perkins",
        "image": "/img/student-icon.png"
      },
      {
        "name": "Ann Perkins",
        "image": "/img/student-icon.png"
      },
      {
        "name": "Ann Perkins",
        "image": "/img/student-icon.png"
      }
    ],
    "completion": "Completed"
  }]
}

现在我想为此表添加额外的功能。我希望能够按日期排序或按课程排序。

<select>
    <option selected>Sort</option>
    <option>Date</option>
    <option>Course</option>
</select>

这是我最终陷入困境的地方。如何在不必渲染新页面的情况下添加日期和课程的选择下拉菜单？目前我只是循环浏览每一段数据并按照表格的外观顺序打印，但我希望不仅可以按日期排序，还可以对课程进行排序。

在Node＆amp;中添加排序功能EJS

0 个答案: