Добавление функции сортировки в Node & ejs - PullRequest
Новая
       8

Добавление функции сортировки в Node & ejs

0 голосов
/ 25 апреля 2018

У меня есть шаблон, который я запускаю через некоторые данные, поступающие из локального файла 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>

Это то место, где я немного застрял. Как добавить выпадающие списки для дат и курсов, не создавая новую страницу? В настоящее время я просто циклически перебираю каждый фрагмент данных и распечатываю их в порядке, как выглядит таблица, но я хочу иметь возможность сортировать не только по дате, но и по курсу.

...