来自Ajax源的DataTables按数据顺序和显示格式化日期
基本上我想将数据从ajax中提取到我的列中，但我希望列中的单元格具有data-order属性，并使用ajax调用中的值，并使用moment.js格式化单元格中的数据。
我认为这是使它漂亮和可订购的最好方法。 我找到了datetime-momentJS的插件，但它只会订购日期，而不是格式化它。
var dataTable = $('#products').DataTable( { 'processing': true, 'ajax': '/products', 'columns': [ { 'data': 'updated_at', 'className':'date' } ] });
现在我将此作为最终结果：
2015-11-08T11:00:00.000Z
但我想要的结果是：
11/08/2015
我可以使用render选项以某种方式执行此操作吗？
像我想要的格式化时刻代码将是moment('2015-11-08T11:00:00.000Z').format('DD/MM/YY') 。
您可以使用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更改为其他值。
您可以通过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" }, { ... } }
我遇到了一个与我的基于Laravel的项目非常相似的问题。 波格丹的回答让我走上正轨; 然而，这个链接设法帮助我完全解决我的特定问题 – 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还提供了额外的function。
在作者的例子中，他希望以人类可读的格式显示他的日期，但能够按可排序的值（例如时间戳的数值）对其进行排序。
以下是直接从源代码中获取的代码示例：
他的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’数据值中。 对于“显示”值，他以人性化格式更改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前端的排序。
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的正交数据在我正在研究的项目中为我解决了很多未来的问题。 我可以看到它非常强大，特别是对于可用性和实用性。 我希望波格丹的答案和这个例子可以帮助任何未来的读者 – 我很高兴我遇到了他们:)。