I was testing the jquery library of datatable's that is quite complete and good, related to the property that can be sorted upwards to descending data, enter time data, such as 7:15 AM, 8:00 AM, 9:00 AM, 9:45 AM, I realized that the column where it has that kind of data, erroneously orders the table, that is, it puts first 9:00 AM and then 8:40 AM for example.
How could I solve this? to order the field correctly
Annex the example that I made so that they understand me in a better way
At the end of 2014, Datatables depreco override functions to make the topic of ordering dates and "replacement" "suggesting using Momentjs to perform the operation. To use it you only have to refer to the momentjs script and before initializing your Datatable use the function $. Fn.dataTable.moment () that will receive the date format that you want to order Take into account the order in which they are called the script because if you do not do it in that order you will get an error by reference.
$(document).ready(function() {
$.fn.dataTable.moment('h:mm A');
var table = $('#example').DataTable();
});<html>
<head>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/datetime-moment.js"></script>
</head>
<body>
<div class="container-fluid">
<br>
<div class="row">
<div class="col-xs-12">
<table id="example" class="table table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th>Hora Inicio</th>
<th>Hora Final</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Hora Inicio</th>
<th>Hora Final</th>
</tr>
</tfoot>
<tbody>
<tr>
<td> 7:15 AM </td>
<td> 8:00 AM </td>
</tr>
<tr>
<td> 8:00 AM </td>
<td> 8:40 AM </td>
</tr>
<tr>
<td> 8:40 AM </td>
<td> 9:00 AM </td>
</tr>
<tr>
<td> 9:00 AM </td>
<td> 9:45 AM </td>
</tr>
<tr>
<td> 9:45 AM </td>
<td> 10:30 AM </td>
</tr>
<tr>
<td> 10:30 AM </td>
<td> 10:35 AM </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>A simple and quick solution is to give static order, and remove the auto-order, in passing I put the language that is what is missing too.
$(document).ready(function(){
var idioma = {
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando _START_ al _END_ de _TOTAL_ registros",
"sInfoEmpty": "Mostrando _START_ al _END_ de _TOTAL_ registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
},
buttons: {
copyTitle: 'Los datos fueron copiados',
copyInfo: {
_: 'Copiados %d filas al portapapeles',
1: 'Copiado 1 fila al portapapeles',
}
}
}
var table = $('#example').DataTable({
"ordering": false,
"language": idioma
});
});<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Data table ejemplo para pregunta</title>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.datatables.net/buttons/1.5.1/css/buttons.bootstrap.min.css'>
</head>
<body>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<div class="container-fluid">
<br>
<div class="row">
<div class="col-xs-12">
<table id="example" class="table table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th>Hora Inicio</th>
<th>Hora Final</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Hora Inicio</th>
<th>Hora Final</th>
</tr>
</tfoot>
<tbody>
<tr>
<td> 7:15 AM </td>
<td> 8:00 AM </td>
</tr>
<tr>
<td> 8:00 AM </td>
<td> 8:40 AM </td>
</tr>
<tr>
<td> 8:40 AM </td>
<td> 9:00 AM </td>
</tr>
<tr>
<td> 9:00 AM </td>
<td> 9:45 AM </td>
</tr>
<tr>
<td> 9:45 AM </td>
<td> 10:30 AM </td>
</tr>
<tr>
<td> 10:30 AM </td>
<td> 10:35 AM </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src='https://code.jquery.com/jquery-1.12.4.js'></script>
<script src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'></script>
<script src='https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js'></script>
<script src='https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js'></script>
<script src='https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js'></script>
<script src='https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js'></script>
<script src='https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js'></script>
<script src='https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js'></script>
<script src='https://cdn.datatables.net/buttons/1.5.1/js/buttons.bootstrap.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>