基本上我想把数据从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"one_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"one_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,在我正在进行的项目中为我解决了许多未来的问题。我可以认为这是非常强大的,尤其是在可用性和实用性方面。我希望博格丹的回答和这个例子能帮助到未来的读者——我当然很高兴能遇到他们:)。