[英]DataTables datetime column sorting is not working?
我尝试添加date-uk
、 date-eu
插件和datetime-moment
但似乎没有任何效果。
我的日期格式是08/08/2019 14:33
,如DD/MM/YYYY HH:mm
。 我尝试在 DataTable 初始化之前添加以下行,但它不起作用:
$.fn.dataTable.moment( 'DD/MM/YYYY HH:mm' );
这是整个代码:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.20/sorting/date-euro.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.20/sorting/datetime-moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.min.js"></script>
<script>
$.fn.dataTable.moment( 'DD/MM/YYYY HH:mm' );
// Create global variable for vms clients related variables
ce.global.vmsClients = {};
// Get the vmsClients table element
var $vmsClientsTable = $('#vmsClients-table');
// Init the data tables on the vms client table
ce.global.vmsClients.vmsClientsTable = $vmsClientsTable.DataTable({
ajax: {
url: Routing.generate('admin_vms_clients_get_vms_clients'),
type: 'POST',
data: function (data) {
data.customFilters = $('#vmsClients-criteria-form').serialize();
return data;
},
reload: function (json) {
}
},
drawCallback: function (settings) {
vmsClients_Customize_Table();
},
fnInitComplete: function () {
},
serverSide: true,
columns: [
{
data: 'id',
render: function (data) {
return '<label class="selection-checkbox action">' +
' <input type="checkbox" value="' + data + '" class="venues-selection-checkbox datatable-selection-checkbox">' +
' <span class="checkmark"></span>' +
'</label>';
},
searchable: false,
},
{data: 'id'},
{
data: 'type',
render: function (data) {
var returnVar = '';
if (data == 1)
returnVar = "Venue Admin";
if (data == 2)
returnVar = "Venue Manager";
return returnVar;
},
},
{data: 'name'},
{data: 'emailAddress'},
{
data: 'status',
render: function (data) {
var returnVar = '';
if (data == 1)
returnVar = '<span class="text-yes">Yes</span>';
if (data == 0)
returnVar = '<span class="text-no">No</span>';
return returnVar;
},
},
{data: 'lastLoginTime'},
{data: 'createdAt'},
{
data: 'id',
render: function (data) {
return '<a class="view-venue action" data-id="' + data + '" href="javascript:void(0)"><img height="20" width="20" src="' + dashboardImagesDir + '/icons/view.svg"></a>';
},
searchable: false
},
{
data: 'id',
render: function (data) {
return '<a class="delete-images action" data-id="' + data + '" href="javascript:void(0)">' +
' <img height="20" width="20" src="' + dashboardImagesDir + '/icons/delete.svg">' +
'</a>' +
'<a class="edit-venue action" href="' + Routing.generate('vms_client_edit', {id: data}) + '">' +
' <img height="20" width="20" src="' + dashboardImagesDir + '/icons/edit_icon.svg">' +
'</a>';
},
searchable: false
}
],
scrollX: true,
bLengthChange: false,
language: {
search: "",
paginate: {
previous: '‹',
next: '›'
},
aria: {
paginate: {
previous: 'Previous',
next: 'Next'
}
},
info: 'Total <span class="pagination-filtered-count pagination-total-count"><b>_MAX_</b></span>'
},
dom: '<"row"<"col-sm-3"l><"col-sm-3"f><"col-sm-6"p>>' +
'<"row"<"col-sm-12"tr>>' +
'<"row"<"col-sm-4"><"col-sm-8"<"row"<"col-sm-8 bottom-pagination"ip><"col-sm-4 download-enquiries">>>>'
});
</script>
好时机,我在几个小时前尝试使用 date-euro - 它似乎根本不喜欢包含在任何 html 中的<TD>
中的日期 - 我最终重写了 date-euro 插件
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
"date-euro-pre": function (a) {
var x;
if ($.trim(a) !== '') {
if (a[0] === '<') {
var d = document.createElement('div');
d.innerHTML = a;
a = d.textContent;
}
var frDatea = $.trim(a).split(' ');
var frTimea = (undefined != frDatea[1]) ? frDatea[1].split(':') : [00, 00, 00];
var frDatea2 = frDatea[0].split('/');
x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + ((undefined != frTimea[2]) ? frTimea[2] : 0)) * 1;
} else {
x = Infinity;
}
return x;
},
"date-euro-asc": function (a, b) {
return a - b;
},
"date-euro-desc": function (a, b) {
return b - a;
}
});
对我有用,但你的里程可能会有所不同
唯一的变化是pre
代码检查日期是否包含在其他 HTML 中,这非常简单,但可以满足我的需要
可以进行更复杂的检查,甚至根本不检查,只需运行代码而不检查if (a[0] === '<')
,但我没有测试过这种情况 - 我需要快速修复,并且这做到了
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.