Ajax源数据表按数据顺序排列，并显示格式化日期

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

本文关键字：显示 显示格式 格式化 日期 排列 数据表 数据 顺序 Ajax      更新时间：2023-09-26

基本上我想把数据从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')。

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

Ajax：

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

您可以使用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更改为其他值。

我在一个基于Laravel的项目中遇到了一个非常类似的问题。博格丹的回答使我走上了正轨；然而，这个链接成功地帮助我彻底解决了我的特定问题——https://www.gyrocode.com/articles/laravel-datatables-and-sortable-datetime-carbon-objects/.

作者正在使用yajra/laravel数据表包进行后端处理——这是一个很棒的包，也是我喜欢使用的包。DataTablesJQuery插件的官方链接是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"数据值中的"display"answers"timestamp"值。对于"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"answers"timestamp"值。正如Bogdan的回答和前面提到的那样，显示值供用户查看，"时间戳"值供DataTables前端排序。

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。

正交数据，相对于DataTables，在我正在进行的项目中为我解决了许多未来的问题。我可以认为这是非常强大的，尤其是在可用性和实用性方面。我希望博格丹的回答和这个例子能帮助到未来的读者——我当然很高兴能遇到他们：）。

相关文章：