скажем, у нас есть массив элементов в вашем состоянии:
[{name: "item1", id: 1}, {name: "item2", id: 2}, {name: "item3", id: 3}]
<tbody>
{this.state.items.map((item) => {
<ObjectRow key={item.id} name={item.name} />
})}
</tbody>
Здесь работает jQuery-решение .
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));
}
} );
Добавьте приведенный выше код в сценарий и задайте конкретный столбец значениями даты с { "sType": "date-uk" }
и другие как null, см. ниже:
$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
null,
null,
null,
null,
{ "sType": "date-uk" },
null
]
});
});
Если вам нужно быстрое решение, вы можете просто добавить фактическое значение DateTime в каждой строке в конкретном (YYYYMMDD) и скрыть его с помощью CSS, это позволит вам сортировать этот столбец без изменения javascript.
Здесь работает решение CSS
HTML
<td><span class='hide'>YYYYMMDD</span>DD/MM/YYYY</td>
CSS
.hide {
display:none;
}
Используйте атрибут data-order
в теге <td>
, например, (пример Ruby):
<td data order='<%=rentroll.decorate.date%>'><%=rentroll.decorate.date%></td>
Ваша функция декоратора здесь будет:
def date
object.date&.strftime("%d/%m/%Y")
end
используйте этот фрагмент!
$(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();
});
момент js хорошо работает для всех форматов даты и времени, добавьте этот сниппер, прежде чем инициализировать datatable, как я сделал ранее.
] Также не забудьте загрузить http://momentjs.com/
Преобразование даты в формат YYYYMMDD и добавление к фактическому значению ( DD / MM / YYYY ) в <td>
, оберните его в элемент, установите стиль display:none;
в элементы. Теперь сортировка даты будет работать как обычная сортировка. То же самое можно применить к сортировке даты и времени.
HTML
<table id="data-table">
<tr>
<td><span>YYYYMMDD</span>DD/MM/YYYY</td>
</tr>
</table>
CSS
#data-table span {
display:none;
}
Как я нашел, самый простой способ сортировки в этом случае - добавить параметр «aaSorting» в JS.
Например:
$(document).ready(function() {
$('#contacts-table').dataTable({
"aaSorting": [0, 'desc']
});
Проблема заключается в том, что в этом примере будут сортироваться записи из 1-го столбца, такие как STRING, но не как даты. Если исходный код позволяет вам изменить формат даты с dd / mm / yyyy на yyyy / mm / dd, «aaSorting» будет работать правильно для вас.
Для меня, похоже, было
нажать полный объект datetime, выбранный с помощью запроса select из моего db в наборе данных, который будет рисоваться по формату datatable »2018-01-05 08:45: 56 "
then
$('#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, который я хочу в строке
в php или js просто передают массив и используют ортогональные, например:
$var[0][0] = "like as u wish, 30/12/2015 or something else";
$var[0][1] = strtotime($your_date_variable);
и в datatable ...
$('#data-table-contas_pagar').dataTable({
"columnDefs": [
{"targets":[0],"data": [0],"render": {"_": [0],"sort": [1]}}
]
});
Я использовал в остальном вызов
** Date Variable: 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;
}
Я попробовал это и работал для меня.
https://github.com/sedovsek/DataTables-EU-date-Plug-In
] Я использовал режим format .ToString("dd/MM/yyyy");
, тогда в моем jQuery.Datatable отлично работает.
jQ ниже
oTable = $('#grid').dataTable({
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sType": "eu_date" },
null
]
});
});
В столбце у вас есть даты, вы должны определить с помощью sType, например код выше.
Я знаю, что это старый вопрос, и ответы тоже старые. Недавно я столкнулся с простым и чистым способом сортировки дат. Это может быть сделано атрибутом HTML5 data-order
для элемента <td>
.
Вот что я сделал в своем PHP:
<?php
$newdate = date('d M Y', $myDateTime); // Format in which I want to display
$dateOrder = date('Y-m-d', $myDateTime); // Sort Order
?>
<td data-order="<?php echo $dateOrder; ?>" >
<?php echo $newdate; ?>
</td>
Если вы получаете свои даты из базы данных и делаете цикл for для каждой строки и добавляете ее в строку, используемую в javascript для автоматического заполнения данных, это должно выглядеть так. Обратите внимание, что при использовании скрытого трюка диапазона вам нужно учитывать однозначные числа даты, например, если он находится на 6-м часе, вам нужно добавить ноль перед тем, как иначе трюк диапазона не будет работать при сортировке. Пример кода:
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>");
Другое решение: https://datatables.net/blog/2014-12-18
с двумя javascripts libs: //cdnjs.cloudflare.com/ajax /libs/moment.js/2.8.4/moment.min.js и //cdn.datatables.net/plug-ins/1.10.15/sorting/datetime-moment.js
, то только это :
$ (document) .ready (function () {
$.fn.dataTable.moment( 'DD/MM/YYYY' ); $('#example').DataTable();
});
blockquote>
Если вы не хотите использовать momentum.js или любую другую дату, вы можете добавить формат даты в миллисекундах в значении даты, чтобы сортировка читалась в соответствии с миллисекундой. И скрыть формат даты в миллисекундах.
Пример кода:
var date = new Date();
var millisecond = Date.parse(date);
HTML
<td>'<span style="display: none;">' + millisecond + "</span>" + date + </td>
Вот и все.
Самый простой способ сортировки этой проблемы
Просто немного измените свой дизайн, как это
//Add this data order attribute to td
<td data-order="@item.CreatedOn.ToUnixTimeStamp()">
@item.CreatedOn
</td>
Add create this Date Time helper function
// #region Region
public static long ToUnixTimeStamp(this DateTime dateTime) {
TimeSpan timeSpan = (dateTime - new DateTime(1970, 1, 1, 0, 0, 0));
return (long)timeSpan.TotalSeconds;
}
#endregion
Я хотел бы указать, что при использовании данных с сервера через Ajax решение супер просто, но может не сразу проявиться.
При возврате массива порядка сортировки Datatables отправит (в $_POST
) 2-элементный массив, который будет эквивалентен :
$_POST['order'][0] =array('column'=>'SortColumnName', 'dir'=>'asc');
// 2nd element is either 'asc' or 'desc'
Поэтому вы можете отображать дату в любом формате, который вы хотите; просто сервер возвращает критерии сортировки, основанные только на sortColumnName
.
Например, в PHP (с MySQL) я использую следующее:
if (isset($_POST['order'])) {
switch ($_POST['order'][0]['column']) {
case 0:// sort by Primary Key
$order = 'pkItemid';
break;
case 1:// Sort by reference number
$order = 'refNo';
break;
case 2://Date Started
$order = 'dOpen';
break;
default :
$order = 'pkItemid';
}
$orderdir = ($_POST['order'][0]['dir'] === 'desc') ? 'desc' : 'asc';
}
Примечание, что, поскольку ничто из $_POST
не передано в $order
или $orderdir
, атака между скриптами невозможна.
Теперь просто добавьте к запросу MySQL:
$sql ="SELECT pkItemid, refNo, DATE_FORMAT(dOpen,'%b %e, %Y') AS dateStarted
FROM tblReference
ORDER BY $order $orderdir;";
запустите запрос и верните только значение dateStarted
в Datatables в json.
У меня тоже была проблема.
Я использовал span с td как 03/21/2017, делая это, datatable рассматривал это как строку и сортировка не работала.
Я удалил span внутри td, и он был исправлен. например, 03/21/2017
Это решение совершенно неверно. Вы не можете преобразовать дату в число, просто добавляя каждый компонент даты. Если вы попробуете эту логику, например, со следующими датами, вы увидите, что она будет неверной:
20/01/2014 = 2035 15/02/2014 = 2031
Дата ведьмы на первом месте, по возрастанию? 20 января? Не в соответствии с этой логикой: P
Правильный способ выполнения метода parsedate состоит в том, чтобы преобразовать строку в действительное datetime, и они используют функцию getTime для правильного упорядочения таблицы.
var day = a.split('/')[0]
var month = a.split('/')[1]
var year = a.split('/')[2]
var date = new Date(month + "/" + day + "/" + year)
return date.getTime()
Попробуйте этот плагин .
Как указано здесь , вам нужно включить Moment.js и плагин datatable-moment, а затем просто объявить формат даты, который вы используете. Плагин автоматически определит ваши столбцы даты и отсортирует их так, как должно быть. Для объяснений формата moment.js, проверьте здесь .
Пример:
$(document).ready(function() {
$.fn.dataTable.moment('DD/MM/YYYY HH:mm');
$('#example').DataTable();
});
Посмотрите это официальное решение DataTable, используя Moment.js:
Окончательный плагин сортировки даты / времени
Решение Захера Ахмеда прекрасно работает, если вам нужно иметь дело с уже установленной датой.
У меня возникла проблема с этим решением, потому что мне пришлось управлять датой в США.
Я понял это с помощью этого крошечного изменения:
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».