在 EJS 中对对象数组进行排序

如何解决在 EJS 中对对象数组进行排序

我在对 EJS 中的对象数组进行排序时遇到了麻烦（从 Node.js 中的服务器发送）。对象数组包含多个课程及其详细信息。下面是将对象数组发送到 EJS 的 joinLecture.js 文件。 res.render("lectureSearch",{searchData: mappedResults});。这完全正常，可以在 EJS 中显示（没有排序功能）。下面是在对对象数组进行排序时给我带来麻烦的 EJS。

<h2>Current Lectures</h2>
        <table id="lecturesTable">
            <thead>
                <tr>
                    <th>School</th>
                    <th>Location</th>
                    <th>Class</th>
                    <th>Subject</th>
                    <th>Teacher</th>
                    <th>Date</th>
                    <th>Start Time</th>
                    <th>End Time</th>
                    <th>Additional Notes</th>                               
                </tr>
            <thead>
            <tbody id="lecturesTableData">
                <% if(data.length){ %>
                    <% function loadTableData(data){ %>
                       <% for(let i = 0; i < data.length; i++) { %>
                            <tr>
                                <td><%=data[i].school%></td>
                                <td><%=data[i].location%></td>
                                <td><%=data[i].class%></td>
                                <td><%=data[i].subject%></td>
                                <td><%=data[i].teacher_name%></td>
                                <td><%=data[i].date%></td>
                                <td><%=data[i].start_time%></td>
                                <td><%=data[i].end_time%></td>
                                <td><%=data[i].additional_notes%></td>
                            </tr>
                        <% } %>
                    <% } %>
                <% }else{ %>
                    <tr>
                        <td>No Lessons</td>
                    </tr>
                <% } %>
            </tbody>
        </table>
        <button onclick="sortSchoolAscending()">School Ascending</button>
        <button onclick="sortSchoolDescending()">School Descending</button>
        <button onclick="sortLocationAscending()">Location Ascending</button>
        <button onclick="sortLocationDescending()">Location Descending</button>
</body>
<script> 
    function sortSchoolAscending(){
        data.sort(function(a,b) {
            return parseFloat(b.school) - parseFloat(a.school);
        });
        loadTableData(data);
    }

    function sortSchoolDescending(){
        data.sort(function(a,b) {
            return parseFloat(a.school) - parseFloat(b.school);
        });
        loadTableData(data);
    }

    function sortLocationAscending(){
        data.sort(function(a,b) {
            return parseFloat(b.school) - parseFloat(a.school);
        });
        loadTableData(data);
    }

    function sortLocationDescending(){
        data.sort(function(a,b) {
            return parseFloat(a.school) - parseFloat(b.school);
        });
        loadTableData(data);
    }
</script>

课程表在没有 loadTableData EJS 函数的情况下运行良好，但没有排序。以下是我收到的错误。

未捕获的引用错误：数据未定义 在 sortSchoolAscending 在 HTMLButtonElement.onclick.

我已经尝试解决这个问题有一段时间了，因此非常感谢您的帮助。谢谢。

解决方法

它不适用于该功能。再次删除它，所以你只需要：

    <tbody id="lecturesTableData"> 
        <% if(data.length){ %>
           <% for(let i = 0; i < data.length; i++) { %>
                <tr>
                    <td><%=data[i].school%></td>
                    <td><%=data[i].location%></td>
                    <td><%=data[i].class%></td>
                    <td><%=data[i].subject%></td>
                    <td><%=data[i].teacher_name%></td>
                    <td><%=data[i].date%></td>
                    <td><%=data[i].start_time%></td>
                    <td><%=data[i].end_time%></td>
                    <td><%=data[i].additional_notes%></td>
                </tr>
            <% } %>
        <% }else{ %>
            <tr>
                <td>No Lessons</td>
            </tr>
        <% } %>
    </tbody>

这将在页面加载时填充表格。然后可以根据表格行本身进行排序。

您的 script 标签可以按如下方式对表格进行行排序：

const tbody = document.getElementById("lecturesTableData");

// Helper function for sorting on a given column,with a given comparator
function tableSort(colNum,cmp) {
  let rows = [...tbody.rows];
  rows.sort((a,b) => cmp(a.cells[colNum].textContent,b.cells[colNum].textContent))
    .map(row => tbody.appendChild(row));
}

function sortSchoolAscending() {
  tableSort(0,(a,b) => a - b); // assuming that school column has number representations
}

function sortSchoolDescending() {
  tableSort(0,b) => b - a); // assuming that school column has number representations
}

function sortLocationAscending() {
  tableSort(1,b) => a.localeCompare(b)); // assuming that location column has strings
}

function sortLocationDescending() {
  tableSort(1,b) => b.localeCompare(a)); // assuming that location column has strings
}

td,th { border: 1px solid }
th { background: lightgray }
table { border-collapse: collapse }
button { margin: 5px }

<table>
  <thead>
    <tr>
      <th>School</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody id="lecturesTableData">
    <tr>
      <td>122</td>
      <td>Madrid</td>
    </tr>
    <tr>
      <td>30</td>
      <td>Paris</td>
    </tr>
    <tr>
      <td>99</td>
      <td>Brussels</td>
    </tr>
  </tbody>
</table>
<button onclick="sortSchoolAscending()">School Ascending</button>
<button onclick="sortSchoolDescending()">School Descending</button>
<button onclick="sortLocationAscending()">Location Ascending</button>
<button onclick="sortLocationDescending()">Location Descending</button>

我在这里假设 school 列有数字表示，而 location 列有不是数字表示的字符串。通过这种方式，您可以查看对 tableSort 的调用有何不同，并根据需要进行调整。