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

Posted 2023-05-07

【中文标题】来自 Ajax 源的 DataTables 按数据顺序排序并显示格式化日期

【英文标题】：DataTables from Ajax source order-by data-order and display formatted date

【发布时间】：2016-03-08 23:09:13

【问题描述】：

基本上我想将 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')。

【参考方案1】：

你可以直接通过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" 
        ]
     );
 );

阿贾克斯：

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

【参考方案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 更改为另一个值。

【讨论】：

@Ezra 我删除了分号，但data 是一个有效的 jQuery 函数 :) 很高兴听到它有效。

工作与否，.data() 在你的回答中不起作用。

可能是因为我在代码的其他地方使用了.attr()，但你说得对，它是一个有效的函数，“技术上”应该可以工作。

@Ezra Interesting :) 当然，如果 data 不适合您，您可以简单地使用 attr。

【参考方案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);

在这里，作者正在添加要包含在每个“created_at”数据值中的“显示”和“时间戳”值。对于“显示”值，他正在以人类友好的格式更改 created_at 数据值。 'timestamp' 值是 created_at 数据值的数字表示 - 这是作者计划对数据进行排序的值。

JSON 格式数据示例

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

   
    "draw": 1,
    "recordsTotal": 1,
    "recordsFiltered": 1,
    "data": [
        
            "id":         "1",
            "name":       "Tiger Nixon",
            "email":      "[e-mail]",
            "created_at": 
                "display": "12/31/2016",
                "timestamp": "1483142400"
            
        
    ]

在这里，您可以看到“created_at”数据的“显示”和“时间戳”值。正如前面提到的 Bogdan 的回答，显示值供用户查看，而“时间戳”值用于按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，在我正在从事的项目中为我解决了很多未来的问题。我可以认为这是非常强大的，尤其是在可用性和实用性方面。我希望博格丹的回答和这个例子可以帮助任何未来的读者——我很高兴我遇到了他们:)。