9

Olá. Tenho a seguinte DataTable:

       success: function (data) {
            $('#table-controle').html(data);
            $('#table-controle').DataTable({
                "language": {
                    "url": "../../../Content/json/Portuguese-Brasil.json"
                },
                "aaSorting": []               
            });
        }

Os dados eu já trago ordenados corretamente via procedure e carrego eles pelo $('#table-controle').html(data); Porém ao clicar no label de uma coluna do tipo DateTime, os dados são ordenados como se fossem String e não como DateTime. Abaixo as imagens de exemplo:

Dados ordenados corretamente, via procedure

Dados ordenados como String ao invés de DateTime

Como posso resolver ?

5 Respostas 5

12

Antes de mais nada, gostaria de lhe dá uma conselho para que tenha mais chances de conseguir uma resposta, monte um pequeno Code Snippet que reproduza o erro.

No seu caso, você está definindo a opção aaSorting como um array vazio, com o DataTable não está definindo e muito menos inferindo o tipo de cada coluna.

Então o mehor a se fazer neste exemplo é omitir o aaSorting, até por que esta opção não deve ser usada em versões mais recentes do DataTables, no seu lugar vc deve usar o DataTable - Options, em especial o o columns, columns.type, columnDefs e ordering

e por fim, para ordenar uma string que possui uma data no formato dd/MM/yyyy é necessario usar o plugin que referência o columns.type data-eu, então definir o tipo da coluna para data-eu.

$(function () {
  $("#sla").DataTable({
    "columns": [
      { "type": "date-eu" },
      { "type": "date-eu" },
      { "type": "date-eu" },
      null,
      null
    ]
  });
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.12/sorting/date-eu.js"></script>
<table id="sla" class="table table-striped table-hover">
  <thead>
    <tr>
      <th>Data Problema</th>
      <th>Data Previsão</th>
      <th>Data Inclusão</th>
      <th>Pendência</th>
      <th>SLA</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10/07/2016</td>
      <td>11/07/2016</td>
      <td>10/07/2016</td>
      <td>Operacional</td>
      <td>1 hora</td>
    </tr>
    <tr>
      <td>29/07/2016</td>
      <td>29/07/2016</td>
      <td>29/07/2016</td>
      <td>Energia</td>
      <td>4 horas</td>
    </tr>
    <tr>
      <td>02/08/2016</td>
      <td>02/08/2016</td>
      <td>02/08/2016</td>
      <td>Energia</td>
      <td>4 horas</td>
    </tr>
    <tr>
      <td>02/08/2016</td>
      <td>30/08/2016</td>
      <td>02/08/2016</td>
      <td>Energia</td>
      <td>4 horas</td>
    </tr>
    <tr>
      <td>17/08/2016</td>
      <td>18/08/2016</td>
      <td>17/08/2016</td>
      <td>Operacional</td>
      <td>1 hora</td>
    </tr>
  </tbody>
</table>

4

você pode usar assim

Para resolver esse problema, como dito na referência, deve-se incluir os plugins

//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js

//cdn.datatables.net/plug-ins/1.10.10/sorting/datetime-moment.js no cabeçalho, e em seguida, no javascript, incluir o seguinte código:

$(document).ready(function() {

    // você pode usar um dos dois com data ou data e hora
    $.fn.dataTable.moment( 'DD/MM/YYYY HH:mm:ss' );    //Formatação com Hora
    $.fn.dataTable.moment('DD/MM/YYYY');    //Formatação sem Hora

     $('#IDTabela').dataTable({  //Criação da dataTable

     //Campo ordenado por padrão (ao carregar página) O 1 é a coluna a ser ordenada lembrando que começa com 0
        "order": [[1, "asc"]]   
    });

});

Espero ter ajudado

3

Complementando essa resposta, que está setando em campos específicos, há uma forma de identificação dos campos, para depois fazer a ordenação:

1 - Fazendo a Configuração do JQuery:

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "date-br-pre": function ( a ) {
        if (a == null || a == "") {
            return 0;
        }
        var brDatea = a.split('/');
        return (brDatea[2] + brDatea[1] + brDatea[0]) * 1;
    },

    "date-br-asc": function ( a, b ) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },

    "date-br-desc": function ( a, b ) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});

2 - Fazendo a Configuração do Datatable:

$("#sla").DataTable({
    columnDefs: [
        {
            type: 'date-br', 
            targets: 4 
        }
    ],
})

Fonte: JRosseto

1
  • 1
    Muito bom este Extend. Facilitou de mais.
    – Luiz
    Commented 9/04/2018 às 13:23
0

Gente vou contribuir de forma bem prática.

Criei uma ordemData (SQL row_number) e incluir <p hidden> OrdemData</p> dentro do <td> da data na tabela.

1
  • Por favor, forneça detalhes adicionais em sua resposta. Como está escrita atualmente, é difícil entender sua solução.
    – Comunidade Bot
    Commented 2/09/2021 às 13:14
-2

Funcionou !!!

adicionar

<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/plug-ins/1.10.10/sorting/datetime-moment.js"></script>

e em seguida, no javascript, incluir o seguinte código:

$(document).ready(function() {

    // você pode usar um dos dois com data ou data e hora
    $.fn.dataTable.moment( 'DD/MM/YYYY HH:mm:ss' );    //Formatação com Hora
    $.fn.dataTable.moment('DD/MM/YYYY');    //Formatação sem Hora

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 .