Question

我正在处理显示日期的表

[！[在此处输入图片描述] [1]] [1]

一般来说，我对javascript还是比较陌生，我正在努力修改我正在使用的JS，以使此排序功能正常工作。目前，它无法正确比较日期。我已经按照W3的示例编写了此代码，但是我无法弄清楚如何对其进行适当的调整以使日期进行正确比较。

HTML：

值得注意的是，我已经为这个问题制作了这张表，但是在我的实时版本中，该表使用的是ThymeLeaf，并且具有动态日期而不是硬编码日期。

<table id="myTable">
<thead>
<tr>
    <th>Name</th>
    <th onclick="sortTable(0)">Date</th>
    <th>Status</th>

</tr>
</thead>
<tbody>
<tr>
    <td>OLR</td>
    <td>12-11-2018 03:11:14</td>
    <td>SUBMITTED</td>
</tr>
<tr>
    <td>AF</td>
    <td>12-11-2018 03:11:12</td>
    <td>SUBMITTED</td>
</tr>
<tr>
    <td>SAF</td>
    <td>12-11-2018 02:11:27</td>
    <td>COLLECTION_COMPLETE</td>
</tr>
<tr>
    <td>CTT</td>
    <td>15-11-2018 11:11:13</td>
    <td>UNSUBMITTED</td>
</tr>
<tr>
    <td>WP</td>
    <td>19-11-2018 02:11:36</td>
    <td>SUBMITTED</td>
</tr>
</tbody>

JS：

function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;

dir = "asc";

while (switching) {
    switching = false;
    rows = table.rows;

    for (i = 1; i < (rows.length - 1); i++) {
        shouldSwitch = false;

        x = rows[i].getElementsByTagName("TD")[n];
        y = rows[i + 1].getElementsByTagName("TD")[n];

        if (dir == "asc") {
            if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                shouldSwitch = true;
                break;
            }
        } else if (dir == "desc") {
            if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                shouldSwitch = true;
                break;
            }
        }
    }
    if (shouldSwitch) {
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
        switching = true;
        switchcount ++;
    } else {
        if (switchcount == 0 && dir == "asc") {
            dir = "desc";
            switching = true;
        }
    }
  }
}

到目前为止，我已经为此工作了大约8个小时，我真的很努力。在比较之前，我尝试过先将元素转换为日期，但无法使其正常工作。

感谢您的帮助。

在取得了一些进展之后，但是，当我单击标题对表进行排序时，很多内容都消失了。

我新的排序表功能：

function sortTable() {

const dates = [...document
    .getElementById('myTable')
    .querySelectorAll('td')
]
    .filter(x => x.textContent.match(/\d{2}\-\d{2}\-\d{2}/))
    .map(x => {
        const [d, t] = x.textContent.trim().split(' ');
        const [day, month, yr] = d.split('-').map(Number);
        const [hr, min, sec] = t.split(':').map(Number);
        return new Date(yr, month - 1, day, hr, min, sec);
    });


const sorted = dates.sort((a, b) => {
    if (a > b) return 1;
    if (b > a) return -1;
    return 0;
});


const html = '<tr><id="timestamp">Last Updated</td></tr>' + sorted
    .map(date => {
        const yr = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hr = date.getHours();
        const min = date.getMinutes();
        const sec = date.getSeconds();

        const dateString = `${day}-${month}-${yr} ${hr}:${min}:${sec}`;
        return `<tr><td>${dateString}</td></tr>`;
    })
    .join('');

document.getElementById('myTable').innerHTML = html;

}

Answer 1

有一个名为DataTables的jQuery插件，它可以完成上述工作以及很多其他事情。你为什么要发明自己的自行车？

要获得非常基本的功能集（包括排序），您只需要执行DataTables主页上建议的操作即可：在标题中指向jQuery，DataTables及其样式表。

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>

或者，您可以使用这些文件的本地副本。

然后，您只需致电

$(document).ready( function () {
    $('#myTable').DataTable();
} );

让DataTables负责其余的工作 http://jsfiddle.net/1fvkp6L0/14/

Answer 2

首先以一种我们可以实际排序的形式（即数组）获取日期列表：

const dates = [...document
  .getElementById('id-of-the-table')
  .querySelectorAll('td')
]
.filter(x => x.textContent.match(/\d{2}\-\d{2}\-\d{2}/))
.map(x => {
  const [d, t] = x.textContent.trim().split(' ');
  const [day, month, yr] = d.split('-').map(Number);
  const [hr, min, sec] = t.split(':').map(Number);
  return new Date(yr, month - 1, day, hr, min, sec);
});

现在，我们可以根据日期值对它们进行排序：

const sorted = dates.sort((a, b) => {
  if (a > b) return 1;
  if (b > a) return -1;
  return 0;
});

要切换降/升，只需反转条件。然后使用排序后的值重新生成表：

const html = sorted
.map(date => {
  const yr = date.getFullYear();
  const month = date.getMonth() + 1;
  // etc. etc.
  const datestring = `${day}-${month}-${yr} ${hr}:${min}:${sec}`;
  return `<tr><td>${datestring}</td></tr>`;
})
.join('');

document.getElementById('id-for-table').innerHTML = html;

Javascript / Thymeleaf表按日期/时间排序，格式为dd-MM-yyyy hh：MM：ss

2 个答案: