0

Estou utilizando o componente DataTables.net versão 1.19 e estou com problemas para ordenar por data no padrão DD/MM/YYYY HH:mm:ss

já tentei com moment, data-eu e nada faz ele ficar corretamente ordenado

Fiz um exemplo no fiddle.net https://jsfiddle.net/dorathoto/zn1vg3at/12/

O melhor que consegui foi ordenar por data porém o Id se perde. https://jsfiddle.net/dorathoto/zn1vg3at/19/

No StackOverflow-en teve algumas sugestões bizarras como colocar um timestamp oculto e ordernar por ele. O que pra mim é uma enorme gambiarra.

1 Resposta 1

1

Uma forma é colocando um atributo data-order (veja documentação) em cada td da coluna que você quer ordenar. O valor desse atributo deve ter o formato "YYYY/MM/DD HH:MM:SS".

Por exemplo:

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

O Datatables trabalha com esse atributo e ordena pelo seu valor em vez do que tem na célula.

No exemplo abaixo eu coloquei dentro da primeira coluna de cada linha um número que indica a ordem correta. Faça o teste e veja que os números da primeira coluna ficam na sequência correta de acordo com a data da segunda coluna, na ordem escolhida:

$(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>

Neste caso, se estiver usando Moment.js apenas para isso, não precisa mais carregá-lo.

3
  • meio gambiarra né? existe algum componente mais moderno no lugar do datatable.net?
    – Dorathoto
    9/06/2020 às 16:13
  • Não é gambiarra não. Tá na documentação do componente.
    – Meu ovo
    9/06/2020 às 16:53
  • mas parece que foi o modo que eles fizeram para fazer funcionar..rs mas de qualquer maneira deu certo!
    – Dorathoto
    9/06/2020 às 19:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .