我正在使用一个叫做 datatables 的 Jquery 插件。
它很棒,但是我无法按照 dd/mm/yyyy 的格式正确排序日期。
我查看了他们的支持格式,但没有任何解决方法能够解决这个问题。
请问这里有人可以帮我吗?
我正在使用一个叫做 datatables 的 Jquery 插件。
它很棒,但是我无法按照 dd/mm/yyyy 的格式正确排序日期。
我查看了他们的支持格式,但没有任何解决方法能够解决这个问题。
请问这里有人可以帮我吗?
$var[0][0] = "like as u wish, 30/12/2015 or something else";
$var[0][1] = strtotime($your_date_variable);
$('#data-table-contas_pagar').dataTable({
"columnDefs": [
{"targets":[0],"data": [0],"render": {"_": [0],"sort": [1]}}
]
});
对我来说似乎有效的方法是:
将从数据库中使用select查询获取的完整日期时间对象推入数据集中,该数据集将以datatable格式绘制“2018-01-05 08:45:56”
然后
$('#Table').DataTable({
data: dataset,
deferRender: 200,
destroy: true,
scrollY: false,
scrollCollapse: true,
scroller: true,
"order": [[2, "desc"]],
'columnDefs': [
{
'targets': 2,
'createdCell': function (td, cellData, rowData, row, col) {
var datestamp = new Date(cellData);
$(td).html(datestamp.getUTCDate() + '-' + (datestamp.getMonth()+1) + '-' + datestamp.getFullYear());
}
}
],
"initComplete": function(settings, json) {
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust();
}
});
行被正确排序,然后我在行中得到了想要的HTML。
我发现在这种情况下最简单的排序方式是通过在JS中添加“aaSorting”选项。
例如:
$(document).ready(function() {
$('#contacts-table').dataTable({
"aaSorting": [0, 'desc']
});
试试这个:
"aoColumns": [
null,
null,
null,
null,
{"sType": "date"}, // "sType": "date" TO SPECIFY SORTING IS APPLICABLE ON DATE
null
]
如果您想对某一列进行排序,请保留 "sType": "date-uk"。
例如:"data": "OrderDate", "sType": "date-uk"
在使用ajax完成Datatable脚本后,请添加以下代码。
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
"date-uk-pre": function (a) {
var ukDatea = a.split('/');
return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
},
"date-uk-asc": function (a, b) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"date-uk-desc": function (a, b) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
然后您将以22-10-2018的格式获得日期
DateTime getDate2 = Convert.ToDateTime(row["date"]);
var hour = getDate2.Hour.ToString();
if (hour.Length == 1)
{
hour = "0" + hour;
}
var minutes = getDate2.Minute.ToString();
if (minutes.Length == 1)
{
minutes = "0" + minutes;
}
var year = getDate2.Year.ToString();
var month = getDate2.Month.ToString();
if (month.Length == 1)
{
month = "0" + month;
}
var day = getDate2.Day.ToString();
if (day.Length == 1)
{
day = "0" + day;
}
var dateForSorting = year + month + day + hour + minutes;
dataFromDatabase.Append("<span style=\u0022display:none;\u0022>" + dateForSorting +
</span>");
我在 REST 调用中使用了
**日期变量是:Created**
var call = $.ajax({
url: "../_api/Web/Lists/GetByTitle('NewUser')/items?$filter=(Created%20ge%20datetime'"+FromDate+"')%20and%20(Created%20le%20datetime'"+ToDate+"' and Title eq '"+epf+"' )&$top=5000",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
call.done(function (data,textStatus, jqXHR){
$('#example').dataTable({
"bDestroy": true,
"bProcessing": true,
"aaData": data.d.results,
"aLengthMenu" : [
[50,100],
[50,100]
],
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel'
],
"aoColumnDefs": [{ "bVisible": false }],
"aoColumns": [
{ "mData": "ID" },
{ "mData": "Title" },
{ "mData": "EmployeeName" },
{ "mData": "Department1" },
{ "mData": "ServicingAt" },
{ "mData": "TestField" },
{ "mData": "BranchCode" },
{ "mData": "Created" ,"render": function (data, type, row) {
data = moment(data).format('DD MMM YYYY');
return data;
}
使用这个代码片段!
$(document).ready(function() {
$.fn.dataTable.moment = function ( format, locale ) {
var types = $.fn.dataTable.ext.type;
// Add type detection
types.detect.unshift( function ( d ) {
return moment( d, format, locale, true ).isValid() ?
'moment-'+format :
null;
} );
// Add sorting method - use an integer for the sorting
types.order[ 'moment-'+format+'-pre' ] = function ( d ) {
return moment( d, format, locale, true ).unix();
};
};
$.fn.dataTable.moment('DD/MM/YYYY');
$('#example').DataTable();
});
Moment.js 对于所有日期和时间格式都有效,像之前一样在初始化数据表之前添加此代码片段。
还要记得加载 http://momentjs.com/。
我在使用Doctrine时遇到了同样的问题。我使用orderBy('p.updatedAt','DESC')
从数据库正确地排序了数据,但是当DataTable处理它们时,最终结果完全不同。
我发现解决这个问题最简单的方法是在我的表中添加一个隐藏时间戳列,然后按照这一列的顺序排序日期。完整的functional example在此处。
<table>
<thead>
<th>Some column<th>
<th>Visible date<th>
<th>Timestamp<th>
</thead>
<tbody>
<td>Example with Twig</td>
<td>{{ product.updatedAt ? time_diff(product.updatedAt) : '' }}</td>
<td>{{ product.updatedAt ? product.updatedAt.getTimestamp() : '' }}</td>
</tbody>
</table>
$(document).ready(function() {
let dateColumn = 1;
let timestampColumn = 2;
let currentColumn = timestampColumn;
let currentDirection = "desc";
let table = $("#dataTable").DataTable({
"order": [
[ timestampColumn, "desc" ],
// If you want to keep the default order from database
// just set "order": [] so DataTable wont define other order
],
"columnDefs": [
{
"targets": [ timestampColumn ],
"visible": false, // Hide the timestamp column
},
]
});
/**
* @var e: Events
* @var settings: DataTable settings
* @var ordArr: Current order used by DataTable
* example: [{"src":8,"col":8,"dir":"asc","index":0,"type":"string"}]
*/
table.on("order.dt", function (e, settings, ordArr) {
currentColumn = ordArr[0].col;
currentDirection = ordArr[0].dir;
if(currentColumn === dateColumn) {
table.order([timestampColumn, currentDirection]).draw();
// Without this line you'll get an unexpected behaviour
table.order([dateColumn, currentDirection]);
}
})
});
Zaheer Ahmed的解决方案对于已经格式化为英国日期的情况很有效。
我遇到了这个解决方案的问题,因为我需要处理美国格式的日期。
我通过这个微小的更改解决了这个问题:
function parseDate(a) {
var ukDatea = a.split('/');
return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
}
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"date-uk-pre": function ( a ) {
return parseDate(a);
},
"date-uk-asc": function ( a, b ) {
a = parseDate(a);
b = parseDate(b);
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"date-uk-desc": function ( a, b ) {
a = parseDate(a);
b = parseDate(b);
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
跟着你的“aoColumns”定义。