将 db 字段保存为 YYYY-MM-DD；需要显示和排序为 DD-MM-YYYY

Question

我有一个保存为 2015-06-26 的 MySQL 日期字段，我需要在数据表中将其显示并排序为 26-06-2015。

我认为“这不是火箭科学”，但我已经阅读了很多文章，但不明白我应该从哪里开始（服务器端、是否有插件、时刻等）。

这是我的调试代码：debug.datatables.net/aninog

这是JS代码：

    var dettagli = []; 
    var table = $('#tabellaDati').DataTable( {
        "stateSave": true,
        "language": {
            "sEmptyTable":     "Nessun dato presente nella tabella",
            "sInfo":           "Vista da _START_ a _END_ di _TOTAL_ elementi",
            "sInfoEmpty":      "Vista da 0 a 0 di 0 elementi",
            "sInfoFiltered":   "(filtrati da _MAX_ elementi totali)",
            "sInfoPostFix":    "",
            "sInfoThousands":  ",",
            "sLengthMenu":     "Visualizza _MENU_ elementi",
            "sLoadingRecords": "Caricamento...",
            "sProcessing":     "Elaborazione...",
            "sSearch":         "Cerca:",
            "sZeroRecords":    "La ricerca non ha portato alcun risultato.",
            "oPaginate": {
                "sFirst":      "Inizio",
                "sPrevious":   "Precedente",
                "sNext":       "Successivo",
                "sLast":       "Fine"
            },
            "oAria": {
                "sSortAscending":  ": attiva per ordinare la colonna in ordine crescente",
                "sSortDescending": ": attiva per ordinare la colonna in ordine decrescente"
            }                   
        },
        "data": datiTabella,
        "columns": [
            {
                "sWidth": "8%",
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "render": function(data, type, row, meta) {
                    return  '<a class="btn btn-xs" href="incarico_form.php?action=edit&id='+data.id+'&pageFrom=<?=pathinfo($_SERVER['PHP_SELF'], PATHINFO_FILENAME ); ?>" title="Modifica"><span class="glyphicon glyphicon-edit"></span></a>'+
                            '<a class="btn btn-xs delete-object" delete-id="'+data.id+'" title="Elimina"><span class="glyphicon glyphicon-trash"></span></a>'+
                            '<a class="btn btn-xs" href="" id="mostraDettaglio" title="dettaglio"><span class="glyphicon glyphicon-folder-open"></span></a>';
                }
            },
            { "data": "id" },
            { "data": "protocollo" },
            { "data": "nomeAssicurato"},
            { "data": "sinistro"},
            { "data": "tipoEvento"},
            { "data": "dataSinistro"},
            { "data": "dataSopralluogo"},
            { "data": "dataIncarico"},
            { "data": "idStatoPratica"},
            { "data": "idStatoPerizia"},
            { "data": "nomeIncaricato"},
            { "data": "dataScadenza"},

        ],

        "order": [[1, 'asc']],
        "initComplete": function( settings, json ) {

            function format ( d ) {
                // `d` is the original data object for the row
                // carica il template del dettaglio
                // usando JsRender
                $.ajax ({
                    async: false,
                    type: "POST",
                    url: "incaricodetail.html",
                    cache: false,
                    success: function(data){
                        templateHtml = data; 
                    }
                });

            var template = $.templates(templateHtml);
            var htmlOutput = template.render(d);
            return htmlOutput;
            }
            // carica i dati formattati in html nell'array dettagli
            // for (i=0; i < this.api().data().length; i++) {
                // data = this.api().row(i).data();
                // dettagli[i] = format(data);
            // }

            // Aggiungo un listener come 'delegato' in modo che possa funzionare anche su elementi della pagina aggiunti in un secondo momento tramite salto ad altra pagina o filtro
            $('#tabellaDati tbody').on('click', '#mostraDettaglio', function () {
                // alert("click");
                var tr = $(this).closest('tr');
                var row = table.row( tr );
                var span = $(this).find("span");

                if ( row.child.isShown() ) {
                    // This row is already open - close it
                    row.child.hide();
                    span.removeClass("glyphicon glyphicon-folder-close").addClass("glyphicon glyphicon-folder-open");   
                }
                else {
                    // Open this row
                    // row.child(dettagli[row.index()]).show(); //carica dati da array dettagli
                    row.child( format(row.data())).show(); //carica dati da ajax
                    span.removeClass("glyphicon glyphicon-folder-open").addClass("glyphicon glyphicon-folder-close");   
                }
                return false;
            });             
        },
    });

日期字段为dataIncarico

Answer 1

这可能最好使用 momentjs 来完成。在你的列定义中添加一个渲染和一个像这样的类型：

{ 
    "data": "dataIncarico",
    "type": "date-uk",
    "render": function(data){
        return moment(data).isValid() ? moment(data).format("DD/MM/YYYY") : "";
    }
}

这会处理格式并告诉数据表使用不同的函数来对数据进行排序：

$.extend($.fn.dataTableExt.oSort, {
    "date-uk-pre": function (a){
        if(moment(a, "DD/MM/YYYY").isValid()){
            return parseInt(moment(a, "DD/MM/YYYY").format("X"), 10);
        }else{
            return 0;
        }
    },
    "date-uk-asc": function (a, b) {
        return a - b;
    },
    "date-uk-desc": function (a, b) {
        return b - a;
    }
});

如果您希望使用服务器端脚本进行搜索，则需要以 YYYY-MM-DD 格式输入日期，或者查看使用日期输入。

希望对您有所帮助。