I have a table with multiple columns. 1 column contains date in format dd.mm.yyyy (example: 26.05.2021). I'm trying to achieve a default sorting by date.
My table looks like this:
<table id="myTable" class="table table-striped table-hover" style="width:100%">
<thead>
<tr>
<th>Title</th>
<th>Date</th>
<th>Time</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text.</td>
<td>25.06.2021</td> <!-- This is the date column I want to sort by -->
<td>15:10</td>
<td>Some Text 2</td>
</tr>
<tr>
<td>Some Text</td>
<td>22.07.2020</td> <!-- This is the date column I want to sort by -->
<td>16:00</td>
<td>Some Text XYZ</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Title</th>
<th>Date</th>
<th>Time</th>
<th>Notes</th>
</tr>
</tfoot>
</table>
So far, I have this JS at the end of my <body> in my HTML file:
<script type="text/javascript" href=".10.25/sorting/date-eu.js"></script>
<script type="text/javascript">
$('#myTable').DataTable({
"language": {
"url": ".10.18/i18n/Slovak.json"
},
columnDefs: [{
type: 'date-eu',
targets: 1
}],
"order": [
[1, "desc"],
[2, "desc"]
],
"pagingType": "first_last_numbers"
});
</script>
The issue is, that this does not order the table correctly. It seems to be ordering only by the day (ignoring month and year), not by the whole date.
Any ideas how to proceed? I have tried all the available answers I was able to find here and also on the DataTables forums, but there weren't any answers which would fix my issue...
Thank you
I have a table with multiple columns. 1 column contains date in format dd.mm.yyyy (example: 26.05.2021). I'm trying to achieve a default sorting by date.
My table looks like this:
<table id="myTable" class="table table-striped table-hover" style="width:100%">
<thead>
<tr>
<th>Title</th>
<th>Date</th>
<th>Time</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text.</td>
<td>25.06.2021</td> <!-- This is the date column I want to sort by -->
<td>15:10</td>
<td>Some Text 2</td>
</tr>
<tr>
<td>Some Text</td>
<td>22.07.2020</td> <!-- This is the date column I want to sort by -->
<td>16:00</td>
<td>Some Text XYZ</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Title</th>
<th>Date</th>
<th>Time</th>
<th>Notes</th>
</tr>
</tfoot>
</table>
So far, I have this JS at the end of my <body> in my HTML file:
<script type="text/javascript" href="https://cdn.datatables/plug-ins/1.10.25/sorting/date-eu.js"></script>
<script type="text/javascript">
$('#myTable').DataTable({
"language": {
"url": "https://cdn.datatables/plug-ins/1.10.18/i18n/Slovak.json"
},
columnDefs: [{
type: 'date-eu',
targets: 1
}],
"order": [
[1, "desc"],
[2, "desc"]
],
"pagingType": "first_last_numbers"
});
</script>
The issue is, that this does not order the table correctly. It seems to be ordering only by the day (ignoring month and year), not by the whole date.
Any ideas how to proceed? I have tried all the available answers I was able to find here and also on the DataTables forums, but there weren't any answers which would fix my issue...
Thank you
Share Improve this question asked Jun 28, 2021 at 7:55 neisorneisor 4321 gold badge6 silver badges17 bronze badges1 Answer
Reset to default 7Because you have two different date/time formats in your table (one for the column 2 date and one for the column 3 time), I remend using the ultimate date/time sorting plug-in.
You need these extra resources in the page header:
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.datatables/plug-ins/1.10.25/sorting/datetime-moment.js"></script>
Then, in the body script, you can define the two formats you need:
$.fn.dataTable.moment( 'DD.MM.YYYY' );
$.fn.dataTable.moment( 'HH:mm' );
Formatting options for those two strings are documented here as part of the moment.js library.
DataTables takes care of the rest.
It looks through the list of date/time formats you have provided and automatically fits the correct format to the relevant column data. It then uses that format to ensure the data is sorted chronologically, while leaving the display format unchanged.
A demo:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery./jquery-3.5.1.js"></script>
<script src="https://cdn.datatables/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables/media/css/site-examples.css">
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.datatables/plug-ins/1.10.25/sorting/datetime-moment.js"></script>
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Title</th>
<th>Date</th>
<th>Time</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text A</td>
<td>21.06.2021</td>
<td>15:10</td>
<td>Some Text 2</td>
</tr>
<tr>
<td>Some Text B</td>
<td>22.07.2020</td>
<td>16:00</td>
<td>Some Text XYZ</td>
</tr>
<tr>
<td>Some Text C</td>
<td>22.07.2020</td>
<td>15:59</td>
<td>Some Text XYZ</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Title</th>
<th>Date</th>
<th>Time</th>
<th>Notes</th>
</tr>
</tfoot>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
$.fn.dataTable.moment( 'DD.MM.YYYY' );
$.fn.dataTable.moment( 'HH:mm' );
$('#example').DataTable( {
order: [
[1, "desc"],
[2, "desc"]
],
} );
} );
</script>
</body>
</html>