2

Dispongo de una tabla en Bootstrap sobre la que quisiera ordenar una columna Fecha. Me da la sensación que me lo esta ordenando como si fuese un string. En cambio, el resto de columnas sí se ordenan bien.

Agradecería vuestra ayuda.

Os facilito algún trozo de código por si me podeis indicar qué estoy haciendo mal. Gracias

En el Fichero de Vistas.php, básicamente muestro el resultado de la consulta SQL:

<table
  id="tbllistado"
  data-EjercicioFactura="<?php echo isset($_GET['EjercicioFactura']) ? $_GET['EjercicioFactura'] : ''; ?>"
  data-NumeroFactura="<?php echo isset($_GET['NumeroFactura']) ? $_GET['NumeroFactura'] : ''; ?>"
  class="table table-responsive table-sm table-striped table-condensed"
>
  <thead class="thead-dark">
    <th width="50px">Cod Cliente</th>
    <th width="90px">Razón Social</th>
    <th width="50px">Fecha Factura</th>
    <th width="50px">Fecha Vcto.</th>
    <th width="30px">Ejercicio</th>
    <th width="30px">Serie</th>
    <th width="30px">Numero</th>
    <th width="30px">Base Comisión</th>
    <th width="30px">% Comision</th>
    <th width="30px">Comisión</th>
  </thead>
  <tbody>
  </tbody>
</table>

En el fichero JS:

function listarCarteraComisiones()
{
    var EjercicioFactura = $.trim($('#tbllistado').attr('data-EjercicioFactura'));
    var NumeroFactura = $.trim($('#tbllistado').attr('data-NumeroFactura'));
    var LinkTemporal = '';

    LinkTemporal = '../ajax/carteracomision.php?op=listar';
    
    //alert(EjercicioPedido);
    //alert( $('#tbllistado').attr('data-codigocliente') );
    tabla=$('#tbllistado').dataTable(
    {
        "lengthMenu": [ 5, 10, 25, 75, 100],//mostramos el menú de registros a revisar
        "aProcessing": true,//Activamos el procesamiento del datatables
        "aServerSide": true,//Paginación y filtrado realizados por el servidor
        dom: '<Bl<f>rtip>',//Definimos los elementos del control de tabla
        buttons: [                
                    'copyHtml5',
                    'excelHtml5',
                    //'csvHtml5',
                    'pdf'
                ],
        "ajax":
                {
                    url: LinkTemporal,
                    type : "get",
                    dataType : "json",                      
                    error: function(e){
                        console.log(e.responseText);    
                    }
                },
        "language": {
            "lengthMenu": "Mostrar : _MENU_ registros",
            "buttons": {
            "copyTitle": "Tabla Copiada",
            "copySuccess": {
                    _: '%d líneas copiadas',
                    1: '1 línea copiada'
                }
            }
        },
        "bDestroy": true,
        "iDisplayLength": 50,//Paginación
        "order": [[ 0, "desc" ]]//Ordenar (columna,orden)
    }).DataTable();
}

1 respuesta 1

0

Ordenar DataTables por fecha es muy sencillo, solo necesitas agregar la fecha en formato YYYYMMDD al inicio de la celda, puedes ponerlo dentro de una etiqueta oculta, por ejemplo:

En CSS agregas la regla para ocultar el formato que servirá para ordenar, puedes usar la etiqueta de tu preferencia, solo agrega el atributo display:none

<style>
#tbllistado tbody td span { display:none; }
</style>

En PHP generas el contenido para fecha oculta y visible, por ejemplo:

// Suponiendo que estás en un ciclo y el campo es "fecha"
// Primero la fecha oculta, en formato para ordenar
$campoFecha = '<span>' . date('Ymd', $row['fecha']) . '</span'>;
// Agregas la fecha en el formato en que quieres que se vea
$campoFecha .= date('d-m/Y', $row['fecha']);
// Remplazas el valor en el arreglo
$row['fecha'] = $campoFecha;

La tabla se va a poder ordenar por la columna fecha y el usuario solo verá la fecha en el formato que definas.

#tbllistado tbody td span { display:none; }
    <table id="tbllistado">
    <thead>
       <tr>
           <th>Fecha</th>
       </tr>
    </thead>
    <tbody>
       <tr>
           <td><span>20201030</span>30-10/2020</td>
       </tr>
    </tbody>
    </table>

1
  • Gracias @Triby. Tu respuesta me ha sido de gran ayuda y bien explicado. Commented el 31 oct. 2020 a las 21:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.