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回调和插件。

代码示例构成上面的链接

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": "$320,800",
      "start_date": {
        "display": "Mon 25th Apr 11",
        "timestamp": "1303686000"
      },
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
    ...
    }
}

Answer 3

我遇到了与我的基于Laravel的项目非常类似的问题。 Bogdan's answer让我走上正轨;但是，这个链接设法帮助我彻底解决了我的特定问题 - https://www.gyrocode.com/articles/laravel-datatables-and-sortable-datetime-carbon-objects/。

作者正在使用yajra/laravel-datatables软件包进行后端处理 - 这是一个很棒的软件包，我喜欢使用它。 DataTables JQuery插件的官方链接是https://datatables.net（您也可以使用Bower和Node Package Manager安装此插件。我还没有深入探索DataTables;但是，有许多附加组件，DataTables还提供了额外的功能。

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

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

他的Laravel控制器中的PHP代码

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调用来检索其数据。您可以使用包含要处理的JSON数据的变量将ajax: '/app/users'替换为data: yourJsonData。 JSON数据已经过专门格式化，可与DataTables一起使用。

Orthogonal data，关于DataTables，在我正在研究的项目中为我解决了很多未来的问题。我可以看到它非常强大，特别是对于可用性和实用性。我希望波格丹的回答和这个例子可以帮助任何未来的读者 - 我很高兴我遇到过他们：）。

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

3 个答案: