来自Ajax源的DataTables按数据顺序和显示格式化日期

Question

基本上我想将数据从ajax中提取到我的列中,但是我希望列中的单元格具有data-order来自ajax调用的值的属性,并使用moment.js来格式化单元格中的数据.

我认为这是使它漂亮和可订购的最好方法.我找到了datetime-momentJS的插件,但它只会订购日期,而不是格式化它.

var dataTable = $('#products').DataTable( {
  'processing': true,
  'ajax': '/products',
  'columns': [
    {
      'data': 'updated_at',
      'className':'date'
    }
  ]
});

现在我将此作为最终结果:

<td class="date">2015-11-08T11:00:00.000Z</td>

但我想要的结果是:

<td class="date" data-order="2015-11-08T11:00:00.000Z">11/08/2015</td>

我能render以某种方式使用该选项吗？

像我想要的格式化它的时刻代码将是moment('2015-11-08T11:00:00.000Z').format('DD/MM/YY').

Answer 1

您可以通过Ajax 发送正交数据来直接获得相同的结果。

您将在服务器端进行时间戳格式设置，并且不需要任何其他JavaScript回调和插件。

代码示例来自上面的链接

JavaScript：

$(document).ready(function() {
    $('#example').DataTable( {
        ajax: "data/orthogonal.txt",
        columns: [
            { data: "name" },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: {
                _:    "start_date.display",
                sort: "start_date.timestamp"
            } },
            { data: "salary" }
        ]
    } );
} );

阿贾克斯：

{
  "data": [
    {
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": {
        "display": "Mon 25th Apr 11",
        "timestamp": "1303686000"
      },
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
    ...
    }
}

Answer 2

您可以使用createdRow回调以便在创建行后应用任何自定义逻辑:

$('#products').dataTable({
  /* */
  'createdRow': function(row, data, dataIndex) {
      var $dateCell = $(row).find('td:eq(0)'); // get first column
      var dateOrder = $dateCell.text(); // get the ISO date
      $dateCell
          .data('order', dateOrder) // set it to data-order
          .text(moment(dateOrder).format('DD/MM/YY')); // and set the formatted text
  }
});

请注意,td:eq(0)选择器假定带有日期的列是第一列.如果不是,则需要将0更改为其他值.