Datatable order by Data en

Question

I’m using the component Datatables.net version 1.19 and I’m having trouble sorting by date by default DD/MM/YYYY HH:mm:ss

already tried with Moment, date-me and nothing makes it stay correctly ordered

I made an example in fiddle.net https://jsfiddle.net/dorathoto/zn1vg3at/12/

The best I could was sort by date but Id gets lost. https://jsfiddle.net/dorathoto/zn1vg3at/19/

At Stackoverflow-en he had some bizarre suggestions like putting a hidden timestamp and sort it out. Which for me is a huge gambit.

Answer 1

One way is to put an attribute data-order (see documentation) in each td of the column you want to sort. The value of this attribute must be in the format "YYYY/MM/DD HH:MM:SS".

For example:

<td data-order="2020/04/02 14:48:37">
   02/04/2020 14:48:37
</td>

Datatables works with this attribute and sorts by its value instead of what it has in the cell.

In the example below I placed within the first column of each row a number indicating the correct order. Do the test and see that the numbers in the first column are in the correct sequence according to the date of the second column, in the order chosen:

$(document).ready(function() {
   
    $('table').DataTable({
        "order": [
            [1, "desc"]
        ]
    });
});

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

<table id="TabelaListas" class="table table-hover dataTable table-striped table-bordered no-footer" >
	<thead>
		<tr>
			<th>ID</th>
			<th>Data Cadastro</th>
		</tr>
	</thead>
  
	<tbody>
		<tr>
			<td>
            2
         </td>
			<td data-order="2020/01/04 14:49:24">
            01/04/2020 14:49:24
         </td>
		</tr>
		<tr>
			<td>
            3
         </td>
         <td data-order="2020/04/02 14:48:37">
            02/04/2020 14:48:37
         </td>
		</tr>
		<tr>
			<td>
            4
         </td>
			<td data-order="2020/05/01 14:25:01">
            01/05/2020 14:25:01
         </td>
		</tr>
		<tr>
			<td>
            1
         </td>
			<td data-order="2020/01/01 14:25:01">
            01/01/2020 14:25:01
         </td>
		</tr>
		<tr>
			<td>
            6
         </td>
			<td data-order="2020/07/01 14:25:02">
            02/07/2020 14:25:02
         </td>
		</tr>
		<tr>
			<td>
            5
         </td>
			<td data-order="2020/05/01 14:25:02">
            01/05/2020 14:25:02
         </td>
		</tr>
	</tbody>
</table>

In this case, if you are only using Moment.js for this, you no longer need to load it.