数据表时刻插件未按预期工作答案

【问题标题】：Datatable moment plugin not working as expected数据表时刻插件未按预期工作
【发布时间】：2019-11-28 09:02:22
【问题描述】：

所以，我有一个数据表页面，我需要按以下格式对日期进行排序：HH:mm:ss DD/MM/YYYY。

我正在使用 Datatables moment js 插件。我试过这个：https://datatables.net/blog/2014-12-18#Completed-plug-in ，还有这个：https://datatables.net/plug-ins/sorting/datetime-moment

问题是，该插件似乎只关注 HH:mm:ss 部分，而忽略了日期部分，甚至似乎是倒序排列。

我做的最后一个实验是运行这个稍微修改过的版本并做笔记：

$.fn.dataTable.moment = function ( format, locale ) {
    console.log('moment function.');

    var types = $.fn.dataTable.ext.type;

    // Add type detection
    types.detect.unshift(function (d) {
        if (d) {
            // Strip HTML tags and newline characters if possible
            if ( d.replace ) {
                d = d.replace(/(<.*?>)|(\r?\n|\r)/g, '');
            }

            // Strip out surrounding white space
            d = $.trim( d );
        }

        // Null and empty values are acceptable
        if (d === '' || d === null) {
            return 'moment-' + format;
        }

        return moment(d, format, locale, true).isValid() ?
            'moment-' + format :
            null;
    } );

    // Add sorting method - use an integer for the sorting
    types.order['moment-' + format + '-pre'] = function (d) {
        if (d) {
            // Strip HTML tags and newline characters if possible
            if ( d.replace ) {
                d = d.replace(/(<.*?>)|(\r?\n|\r)/g, '');
            }

            // Strip out surrounding white space
            d = $.trim( d );
        }

        console.log('unformatted: ' + d);
        console.log('moment:');
        console.log(moment(d, format, locale, true));
        console.log('format x: ' + parseInt(moment(d, format, locale, true).format('x'), 10));

        return !moment(d, format, locale, true).isValid() ?
            Infinity :
            parseInt(moment(d, format, locale, true).format('x'), 10);
    };
};

结果如下：

unformatted: 19:13:28 16/07/2019 login_attempts:63:21
moment: login_attempts:64:21
Object { _isAMomentObject: true, _i: "19:13:28 16/07/2019", _f: "HH:mm:ss DD/MM/YYYY", _strict: true, _isUTC: false, _pf: {…}, _locale: {…}, _d: Date Tue Jul 16 2019 19:13:28 GMT+0200 (Central European Summer Time), _isValid: true }
login_attempts:65:21
format x: 1563297208000 login_attempts:66:21
unformatted: 19:13:27 16/07/2019 login_attempts:63:21
moment: login_attempts:64:21
Object { _isAMomentObject: true, _i: "19:13:27 16/07/2019", _f: "HH:mm:ss DD/MM/YYYY", _strict: true, _isUTC: false, _pf: {…}, _locale: {…}, _d: Date Tue Jul 16 2019 19:13:27 GMT+0200 (Central European Summer Time), _isValid: true }
login_attempts:65:21
format x: 1563297207000 login_attempts:66:21
unformatted: 19:13:26 16/07/2019 login_attempts:63:21
moment: login_attempts:64:21
Object { _isAMomentObject: true, _i: "19:13:26 16/07/2019", _f: "HH:mm:ss DD/MM/YYYY", _strict: true, _isUTC: false, _pf: {…}, _locale: {…}, _d: Date Tue Jul 16 2019 19:13:26 GMT+0200 (Central European Summer Time), _isValid: true }
login_attempts:65:21
format x: 1563297206000

如您所见，完全有效的结果。但是，问题是这些仅在我重新排序之前打印。本质上，这意味着当我看到这些时，那些日期时间现在在我的最后一页（认为值得一提，这对我来说似乎很奇怪。）

我也试过这个：

 columnDefs: [{
      targets: [8], //index of column
      type: 'date'
    }]

和“日期时间时刻”相同，因为我在某处读过它。没有区别。

除此排序插件外使用的软件有：

laravel 5.2
Yajra 数据表插件 v6.29.0
数据表 1.10.16
时刻 js 2.24.0

数据是通过 ajax 提供的。这可能是个问题吗？

提前感谢您的帮助。

【问题讨论】：

您可以将您的示例添加为代码 sn-p 或小提琴吗？您也可以使用 jsonplaceholder.typicode.com 或 mocky.io 使用您的数据制作模拟 json。有人可以更好地回答或回答您的问题。

标签： jquery datatables momentjs

【解决方案1】：

我已经知道发生了什么。

似乎是 Yajra 数据表插件实际上在进行排序。

事情是：在我的登录尝试模型中，我有这个服务器端日期格式化方法：

public function getAttemptedAtAttribute($value) {
    return toDMY2($value);
}

toDMY2 是一个使用 Carbon 库返回欧洲格式日期的函数。

问题是，Yajra 数据表插件似乎无法将其识别为日期。

因此，我的解决方案如下：我已经完全去掉了服务端格式化，而是依靠moment js来格式化列，如下：

"columns": [

      [...]

      { "data": "attempted_at", "render": function(data, type, row) {
        return moment(data).format('HH:mm:ss DD/MM/YYYY');
      }, "orderable": true},
],

【讨论】：