Datatable сортировка даты dd/mm / yyyy выпуск
Я использую плагин Jquery под названием datatables
его фантастический, однако я не могу получить даты для сортировки правильно в соответствии с форматом dd/mm/yyyy.
Я просмотрел их форматы поддержки, но ни одно из этих исправлений, похоже, не работает.
кто-нибудь может мне помочь?
20 ответов
решение jQuery
здесь рабочее решение 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
]
});
});
решение CSS
если вы хотите быстрое решение, вы можете просто добавить фактическое значение DateTime в каждой строке в определенном формате (YYYYMMDD) и сделать его скрытым с помощью CSS, это позволит вам сортировать этот столбец без каких-либо изменение javascript.
здесь рабочее решение CSS
HTML-код
<td><span class='hide'>YYYYMMDD</span>DD/MM/YYYY</td>
в CSS
.hide {
display:none;
}
сортировка даты-со скрытым элементом
преобразовать дату в формат YYYYMMDD и добавить к фактическому значению (ДД/ММ/ГГГГ) в <td>
, оберните его в элемент, установите style display:none;
элементов. Теперь сортировка даты будет работать как обычная сортировка. То же самое можно применить к сортировке по дате и времени.
HTML-код
<table id="data-table">
<tr>
<td><span>YYYYMMDD</span>DD/MM/YYYY</td>
</tr>
</table>
в CSS
#data-table span {
display:none;
}
Я знаю, что это старый вопрос, и ответы тоже старые. Недавно я столкнулся с простым и чистым способом сортировки дат. Это можно сделать с помощью HTML5 до <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>
попробовать этой плагин.
Как заявил здесь вы должны включить момент.js и плагин datatable-moment, а затем просто объявите формат даты, который вы используете. Плагин автоматически определит ваши столбцы даты и отсортирует их так, как должно быть. Для моментов.JS формат объяснения, проверьте здесь.
пример:
$(document).ready(function() {
$.fn.dataTable.moment('DD/MM/YYYY HH:mm');
$('#example').DataTable();
});
в 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]}}
]
});
другое решение : https://datatables.net/blog/2014-12-18
С 2 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
тогда только так :
$(документ).ready (function () {
$.fn.dataTable.moment( 'DD/MM/YYYY' ); $('#example').DataTable();
});
Если вы не хотите использовать импульс.js или любой другой формат даты, вы можете добавить формат даты в миллисекундах в значение даты, чтобы сортировка считывалась в соответствии с миллисекундой. И скройте формат даты миллисекунд.
пример кода:
var date = new Date();
var millisecond = Date.parse(date);
HTML-код
<td>'<span style="display: none;">' + millisecond + "</span>" + date + </td>
вот именно.
решение Захира Ахмеда отлично работает, если вам нужно иметь дело с уже сформированной датой Великобритании.
У меня была проблема с этим решением, потому что мне пришлось управлять нами дата отформатированный.
Я понял это с помощью этого крошечного изменения:
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".
Я пробовал это и работал на меня.
https://github.com/sedovsek/DataTables-EU-date-Plug-In
я использовал режим формат .ToString("dd/MM/yyyy");
затем в моем jQuery.Datatable работает отлично.
jQ ниже
oTable = $('#grid').dataTable({
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sType": "eu_date" },
null
]
});
});
столбец у вас есть даты, вы должны определить с помощью sType, как код выше.
Это решение абсолютно неверно. Вы не можете преобразовать дату в число, добавляя каждый компонент даты. Если вы попробуете эту логику, например, со следующими датами, вы увидите, что она не будет соответствовать правильно:
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()
Я хотел бы отметить, что при использовании данных с сервера через 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.
использовать этот фрагмент!
$(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 хорошо работает для всех форматов даты и времени, добавьте этот snipper перед инициализацией datatable, как я делал ранее.
также не забудьте загрузить http://momentjs.com/
У меня тоже такая же проблема.
Я использовал span с в td, как 03/21/2017, делая это, datatable рассматривал это как строку, и сортировка не работала.
Я удалил span внутри td, и он был исправлен. как, 03/21/2017
я использовал в вызове 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;
}
самый простой способ разобраться в этой проблеме
просто измените свой дизайн немного, как это
//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
пожалуйста, посмотрите это официальное решение DataTable, используя момент.js:
конечная дата / время сортировки плагин
что, кажется, работает для меня
нажмите полный объект datetime, извлеченный с помощью запроса 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, который я хочу в строке
поскольку я нашел самый простой способ сортировки в этом случае, добавив опцию "aaSorting" в JS.
например:
$(document).ready(function() {
$('#contacts-table').dataTable({
"aaSorting": [0, 'desc']
});
проблема здесь в том, что этот пример будет сортировать записи из 1-го столбца, как строка, но не как даты. Если исходный код позволяет изменить формат даты с dd/mm/yyyy на yyyy/mm / dd, "aaSorting" будет работать правильно для вас.
использовать на <td>
тег вот так (Пример Рубин):
<td data order='<%=rentroll.decorate.date%>'><%=rentroll.decorate.date%></td>
ваша функция декоратора здесь будет:
def date
object.date&.strftime("%d/%m/%Y")
end
Если вы получаете свои даты из базы данных и делаете цикл for для каждой строки и добавляете его в строку для использования в javascript для автоматического заполнения datatables, это должно выглядеть так. Обратите внимание, что при использовании скрытого трюка span вам нужно учитывать однозначные номера даты, например, если это 6-й час, вам нужно добавить ноль перед ним, иначе трюк span не работает в сортировке.. Пример кода:
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>");