Sort DateTime field of a DataTable

5

Hello. I have the following DataTable:

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

The data I already have ordered correctly via procedure and I load them by $('#table-controle').html(data); However, when you click the label of a column of type DateTime, the data is sorted as if it were String and not as DateTime. Below the sample images:

How can I resolve?

    
asked by anonymous 23.08.2016 / 15:13

4 answers

8

First of all, I'd like to give you some advice so that you have a better chance of getting an answer, make a little Code Snippet that reproduces the error.

In your case, you are setting the option aaSorting to array vazio , with DataTable not setting, let alone inferring the type of each column.

So the best thing to do in this example is to omit aaSorting , even though this option should not be used in newer versions of DataTables , instead you should use DataTable - Options , especially the columns , columns.type , columnDefs and ordering

Finally, to sort a string that has a date in dd/MM/yyyy format, you need to use the plugin that references columns.type data-eu ", then set the column type to 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><scriptsrc="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><scriptsrc="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><tableid="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>
    
23.08.2016 / 16:04
1

Complementing this answer, which is set in specific fields, there is a way to identify the fields, then to do the ordering:

1 - Doing the JQuery Configuration:

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 - Making the Datatable Configuration:

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

Source: JRosseto

    
04.07.2017 / 19:19
0

You can use it as well

To solve this problem, as stated in the reference, you should include the

// 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 in the header, and then in javascript, include the following code:

$(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"]]   
    });

});

I hope I have helped

    
03.11.2017 / 18:44
-1

It worked !!!

add

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

and then in javascript, include the following code:

$(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
    
19.09.2018 / 07:09