jQuery DataTables datetime-moment 没有正确解析日期，或者根本没有

Question

我已经使用 jQuery DataTables 插件构建了一个表。这是my broken Plunker。它有一列日期，我试图将其解析为MMMM YYYY 格式，但它根本不解析。我正在使用的插件是datetime-moment.js，它提供了以下示例：

$(document).ready(function() {
    $.fn.dataTable.moment( 'HH:mm MMM D, YY' );
    $.fn.dataTable.moment( 'dddd, MMMM Do, YYYY' );

    $('#example').DataTable();
});

我的代码不起作用，如下所示：

$(document).ready(function() {
    $.fn.dataTable.moment( 'MMMM YYYY' );
    $(".data-table").DataTable({
        data: tableData,
        columns: [{
            "data": recordCol
        }, 
        {
            "data": stateName
        }, 
        {
            "data": dateCol
        },
        {            
            "data": valCol  
        }]
    });

    d3.selectAll("thead th").each(function(d, i) {
        if (i === 0) {
            this.textContent = "record type";
        } else if (i === 1) {
            this.textContent = stateName;  
        } else if (i === 2) {
            this.textContent = "date"; 
        } else if (i === 3) {
            this.textContent = "treatment episodes";          
        }
    });  
}); //closes $(document).ready(function() {

谁能演示一个解决方案（这里又是my broken Plunker），以便该列正确解析并显示为MMMM YYYY 格式，并且按时间顺序正确排序？

Answer 1

您必须提及您从什么日期格式更改它。我已经分叉并更新了它here 进行检查。

您需要对您的plunker 进行以下更改。

将以下 js 作为 dataTableTime.js 添加到您的插件中。

(function( factory ) {
"use strict";

if ( typeof define === 'function' && define.amd ) {
    // AMD
    define( ['jquery'], function ( $ ) {
        return factory( $, window, document );
    } );
}
else if ( typeof exports === 'object' ) {
    // CommonJS
    module.exports = function (root, $) {
        if ( ! root ) {
            root = window;
        }

        if ( ! $ ) {
            $ = typeof window !== 'undefined' ?
                require('jquery') :
                require('jquery')( root );
        }

        return factory( $, root, root.document );
    };
}
else {
    // Browser
    factory( jQuery, window, document );
}
}
(function( $, window, document ) {


$.fn.dataTable.render.moment = function ( from, to, locale ) {
// Argument shifting
if ( arguments.length === 1 ) {
    locale = 'en';
    to = from;
    from = 'MMM D, Y h:mm:ss A';
}
else if ( arguments.length === 2 ) {
    locale = 'en';
}

return function ( d, type, row ) {
    var m = window.moment( d, from, locale, true );

    // Order and type get a number value from Moment, everything else
    // sees the rendered value
    return m.format( type === 'sort' || type === 'type' ? 'x' : to );
};
};
  }));

在index.html中按以下顺序添加页面

<script src="dataTableTime.js"></script>
<script src="script.js"></script>

从script.js 中删除或注释第 1118 行中的代码，即以下代码

$.fn.dataTable.moment( 'MMMM YYYY' );

通过添加columnDefs 来更改数据表代码如下

$(".data-table").DataTable({
    data: tableData,

    columns: [{
      "data": recordCol
    }, {
      "data": stateName
    }, {
     // "data": dateCol

        "data": dateCol//,
        //render: function(d){
        //    return moment(d).format("MMMM YYYY");
        //}          

    }, {            
      "data": valCol//"values[, ].y"  
    }],
    "columnDefs": [
      {
        "targets": 2,
        render: $.fn.dataTable.render.moment('EEE MMM DD YYYY hh:mm:ss TZD (zzz)', 'MMMM YYYY')
      }
    ]
  });

Answer 2

我对那个插件知之甚少，但是当我不久前使用数据表时，我确实找到了解决方案。您可以在要格式化的数据表列上添加渲染选项：

columns: [{
      "data": recordCol
    }, {
      "data": stateName
    }, {
      "data": dateCol, render: function(d){
         return moment(d).format('MMMM YYYY');
         },
    }, {            
      "data": valCol  
    }]

我知道这不是您想要的，但希望它有所帮助。