问题描述
我在名为“date_fld”的 MysqL 列中将日期字段作为字符串(文本类型)。
在MysqL列中为字符串格式,如下所示:31.12.2021
使用 PHP 和 JS / moment.js,我想将此字符串格式转换为日期对象,以便按实际日期对 DataTables 标头进行排序。
我不确定,该怎么做?
## Fetch records
$this->db->select('*');
$records = $this->db->get('data2')->result();
$data = array();
foreach($records as $record ){
$data[] = array(
"#"=>$record->id,"Date"=>$record->date_fld
);
}
## Response
$response = array(
"draw" => intval($draw),"iTotalRecords" => $totalRecords,"iTotaldisplayRecords" => $totalRecordwithFilter,"aaData" => $data
);
return $response;
}
数据表:
$(document).ready(function(){
$.fn.dataTable.moment('DD.MM.YYYY');
...
{ data: 'date_fld',render: function (data,type,row) {
return moment(new Date(data)).format('DD.MM.YYYY');
}
}
解决方法
如果您已正确设置 JavaScript 脚本,则只需使用以下代码行:
$.fn.dataTable.moment('DD.MM.YYYY');
这样,您就不需要提供渲染函数或对 moment.js
函数的任何显式引用。
分步说明:
- 在 HTML 页面的
<head>
中,我在标准 jQuery 和 DataTables 脚本之后包含以下两个脚本:
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.22/sorting/datetime-moment.js"></script>
第一个脚本用于 moment.js
库。
第二个脚本是 DataTables date-time plugin,它使用 moment.js
。
正是这第二个脚本允许您使用 $.fn.dataTable.moment()
。
- 我的测试表如下所示:
<table id="example" class="display dataTable cell-border" style="width:100%"></table>
- 我的 DataTables 脚本如下:
// This is my test data (you get your data from the database,of course):
var dataSet = [
[ "Tiger Nixon","System Architect","Edinburgh","5421","21.12.2021","$320,800" ],[ "Garrett Winters","Accountant","Tokyo","8422","20.12.2021","$170,750" ],[ "Ashton Cox","Junior Technical Author","San Francisco","1562","31.01.2021","$86,000" ],[ "Sonya Frost","Software Engineer","1667","01.02.2021","$103,600" ],[ "Cedric Kelly","Senior Javascript Developer","6224","31.01.2020","$433,060" ]
];
$(document).ready(function() {
$.fn.dataTable.moment('DD.MM.YYYY');
$('#example').DataTable( {
data: dataSet,columns: [
{ title: "Name" },{ title: "Position" },{ title: "Office" },{ title: "Extn." },{ title: "Start date" },{ title: "Salary" }
]
} );
} );
结果
现在我可以看到以 DD.MM.YYYY
格式显示的日期 - 但它们是按时间顺序排列的:
这是有效的,因为 DataTables 日期时间插件为您做两件事:
(a) 它使用您提供的日期格式 (DD.MM.YYYY
),并自动检测您的数据使用此格式的所有单元格。它为您将这些值从文本转换为日期对象。但是,它使用您的格式来显示表格中的日期数据。
(b) DataTables 日期时间插件自动构建每个日期值的第二个版本,专门用于排序。在幕后,它使用 moment().unix()
来构建这种可排序的日期格式。
因此,您会看到使用首选格式在表格中显示的日期,但是当您对该列进行排序时,DataTables 使用另一种格式。
您不需要使用任何 moment.js
函数,也不需要以任何明确的方式操作日期数据进行排序。一切尽在您的掌握之中。
如果您想避免使用 DataTables 插件,您可以使用直接依赖于 moment.js
的自定义方法:
-
删除
$.fn.dataTable.moment('DD.MM.YYYY');
行。 -
更改日期列以使用渲染器:
{ title: "Start date",render: function ( data,type,row ) {
//console.log(data); // the raw date as a string
var d = moment(data,'DD.MM.YYYY'); // converted to a moment object
var sortString = moment(d).format('YYYYMMDD'); // converted to a new string format
//console.log(sortString);
if ( type === 'display' || type === 'filter' ) {
return data;
} else {
return sortString; // this version of the date will be used for sorting
}
}
},
现在,我们正在构建我们自己的日期可排序版本,而不是将它留给 DataTables 插件。