Сортировка таблиц Javascript / Thymeleaf по дате / времени в формате дд-мм-гггг чч: мм: сс

1

Я работаю над таблицей, в которой отображаются даты

[! [введите описание изображения здесь] [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;

}

  • 0
    Во-первых, включите образец ввода в форму, которую мы можем скопировать / вставить, а не изображение.
  • 0
    Здравствуйте, я отредактировал свой оригинальный пост. Я использую динамические данные, поэтому составил таблицу для этого примера.
Показать ещё 1 комментарий
Теги:
date

2 ответа

3
Лучший ответ

Там плагин для jQuery называется DataTables, который делает это и многое другое. Зачем вам изобретать свой велосипед?

Чтобы получить очень простой набор функций (включая сортировку), вам просто нужно сделать то, что предлагает передняя страница 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/

  • 0
    Я пытался их использовать, но только из-за отсутствия понимания у меня возникли проблемы. Я полностью открыт для решения, использующего DateTables.
  • 0
    Это не отвечает на вопрос. В то время как можно было бы предположительно использовать таблицы данных (или vaadin или что-нибудь еще в том же духе), чтобы решить эту проблему, вы должны действительно опубликовать, как это сделать.
Показать ещё 8 комментариев
0

Сначала получается список дат в форме, которую мы можем сортировать, т.е. Массив:

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;
  • 0
    Здравствуйте, это здорово и помогло мне продвинуться впервые за 2 дня, видеть, что моя таблица на самом деле очень хорошая сортировка, потому что возвращаем <tr><td>${dateString}</td></tr> Остальная часть моей таблицы удаляется, когда я нажимаю на заголовок, показывая только строки с датами и ничего больше. Нужно ли мне теперь возвращать всю таблицу снова?
  • 0
    @ChrisPeters нет, просто добавьте строку заголовка в выходной файл const html = '<tr><td>Last Updated</td></tr>' + sorted.map...
Показать ещё 12 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню