来自 Ajax 源的数据表按数据顺序排序并显示格式化日期

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

您可以使用 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 更改为另一个值。

Answer 2

通过Ajax直接发送orthogonal data也可以达到同样的效果。

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

上面link的代码示例

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" }
        ]
    } );
} );

Ajax:

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

Answer 3

我的一个基于 Laravel 的项目遇到了非常相似的问题。 got me on the right track; however, this link managed to help me completely solve my particular issue - https://www.gyrocode.com/articles/laravel-datatables-and-sortable-datetime-carbon-objects/。

作者正在使用yajra/laravel-datatables package for back-end processing - it is a fantastic package, and one I enjoy using. The official link for the DataTables JQuery plugin is https://datatables.net (you can also install this with Bower and Node Package Manager)。我还没有深入探索数据表；但是，DataTables 还提供了许多附加功能以提供额外的功能。

在作者的示例中，他希望以人类可读的格式显示他的日期，但能够按可排序的值（例如时间戳的数值）对其进行排序。

以下是直接从源代码中获取的代码示例：

PHP 他的 Laravel 控制器中的代码

public function indexData()
{
    $users = User::select(['id', 'name', 'email', 'created_at']);

    return Datatables::of($users)
        ->editColumn('created_at', function ($user) {
           return [
              'display' => e(
                 $user->created_at->format('m/d/Y')
              ),
              'timestamp' => $user->created_at->timestamp
           ];
        })
        ->filterColumn('created_at', function ($query, $keyword) {
           $query->whereRaw("DATE_FORMAT(created_at,'%m/%d/%Y') LIKE ?", ["%$keyword%"]);
        })
        ->make(true);
}

在这里，作者添加了 'display' 和 'timestamp' 值以包含在每个 'created_at' 数据值中。对于 'display' 值，他正在以人性化的格式更改 created_at 数据值。 'timestamp' 值是 created_at 数据值的数字表示 - 这是作者计划对数据进行排序的值。

示例 JSON-格式化数据

下面的数据示例是可以从上述控制器返回的示例：

{   
    "draw": 1,
    "recordsTotal": 1,
    "recordsFiltered": 1,
    "data": [
        {
            "id":         "1",
            "name":       "Tiger Nixon",
            "email":      "tiger.nixon@company.com",
            "created_at": {
                "display": "12/31/2016",
                "timestamp": "1483142400"
            }
        }
    ]
}

在这里，您可以看到 'created_at' 条数据的 'display' 和 'timestamp' 值。正如前面提到的 Bogdan 的回答，显示值供用户查看，'timestamp' 值用于按 DataTables front-end.

排序

DataTables 插件使用

为了处理JSON格式的数据，作者对插件进行了如下设置：

$('#users-table').DataTable({
    processing: true,
    serverSide: true,
    ajax: '/app/users',
    columns: [
        { data: 'id', name: 'id' },
        { data: 'name', name: 'name' },
        { data: 'email', name: 'email' },
        {
           data: 'created_at',
           type: 'num',
           render: {
              _: 'display',
              sort: 'timestamp'
           }
        }
    ]
});

注意：作者在此示例中使用 AJAX 调用来检索他的数据。您可以将 ajax: '/app/users' 替换为 data: yourJsonData - 使用包含您要处理的 JSON 数据的变量。 JSON 数据已专门格式化以用于 DataTables。

Orthogonal data，关于DataTables，在我正在做的项目中为我解决了很多未来的问题。我认为这是非常强大的，尤其是在可用性和实用性方面。我希望 Bogdan 的回答和这个例子能帮助任何未来的读者——我当然很高兴我遇到了他们:)。

来自 Ajax 源的数据表按数据顺序排序并显示格式化日期

DataTables from Ajax source order-by data-order and display formatted date

javascript

jquery

datatables

datatables-1.10