Как Сортировать по дате с помощью плагина DataTables jQuery?
Я использую плагин datatables jquery и хочу сортироваться по датам.
Я знаю, что у них есть плагин, но я не могу найти, где его скачать с
http://datatables.net/plug-ins/sorting
Я считаю, что мне нужен этот файл: dataTables.numericComma.js, но я не могу найти его нигде, и когда я загружаю datatables, он, похоже, не находится в zip-файле.
Я также не уверен, что мне нужно сделать свой собственный сортировщик даты перейти в этот плагин.
Я пытаюсь отсортировать этот формат MM/DD |YYYY HH:MM TT(AM / PM)
спасибо
редактировать
Как я могу изменить это на сортировку по MM/DD |YYYY HH:MM TT(AM / PM) и изменить его на дату США?
jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function(a,b) {
var ukDatea = a.split('/');
var ukDateb = b.split('/');
var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {
var ukDatea = a.split('/');
var ukDateb = b.split('/');
var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
9 ответов
нажмите на ссылку "Показать подробности" в разделе дата (ДД/ММ/гггг), затем вы можете скопировать и вставить этот код плагина при наличии
Update: я думаю, вы можете просто переключить порядок массива, например:
jQuery.fn.dataTableExt.oSort['us_date-asc'] = function(a,b) {
var usDatea = a.split('/');
var usDateb = b.split('/');
var x = (usDatea[2] + usDatea[0] + usDatea[1]) * 1;
var y = (usDateb[2] + usDateb[0] + usDateb[1]) * 1;
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) {
var usDatea = a.split('/');
var usDateb = b.split('/');
var x = (usDatea[2] + usDatea[0] + usDatea[1]) * 1;
var y = (usDateb[2] + usDateb[0] + usDateb[1]) * 1;
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
все, что я сделал переключатель __date_[1]
(день) и __date_[0]
(месяц), и заменить uk
С us
так что вы не запутаетесь. Думаю, это должно помочь тебе.
Update #2: Вы должны быть в состоянии просто используйте объект date для сравнения. Попробуйте это:
jQuery.fn.dataTableExt.oSort['us_date-asc'] = function(a,b) {
var x = new Date(a),
y = new Date(b);
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) {
var x = new Date(a),
y = new Date(b);
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
сортировка даты-со скрытым элементом
преобразовать дату в формат YYYYMMDD и добавить к фактическому значению (ММ/ДД/ГГГГ) в <td>
, оберните его в элемент, установите style display:none;
элементов. Теперь сортировка даты будет работать как обычная сортировка. То же самое можно применить к сортировке по дате и времени.
HTML-код
<table id="data-table">
<tr>
<td><span>YYYYMMDD</span>MM/DD/YYYY</td>
</tr>
</table>
в CSS
#data-table span {
display:none;
}
вы должны использовать атрибуты данных HTML5. https://www.datatables.net/examples/advanced_init/html5-data-attributes.html
просто добавить сведения-приказ элемент элемент td.
плагины не требуются.
<table class="table" id="exampleTable">
<thead>
<tr>
<th>Firstname</th>
<th>Sign Up Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td data-order="2015-11-13 12:00">13. November 2015</td>
</tr>
<tr>
<td>Daniel</td>
<td data-order="2015-08-06 13:44">06. August 2015</td>
</tr>
<tr>
<td>Michael</td>
<td data-order="2015-10-14 16:12">14. October 2015</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#exampleTable').DataTable();
});
</script>
Я понимаю, что это вопрос двухлетней давности, но я все равно нашел его полезным. В итоге я использовал пример кода, предоставленный Fudgey, но с незначительным модом. Сэкономил мне время, Спасибо!
jQuery.fn.dataTableExt.oSort['us_date-asc'] = function(a,b) {
var x = new Date($(a).text()),
y = new Date($(b).text());
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) {
var x = new Date($(a).text()),
y = new Date($(b).text());
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
по состоянию на 2015 год, наиболее удобный способ, по моему мнению, сортировать столбец даты в DataTable, использует требуются рода плагин. Поскольку формат даты в моем случае был dd/mm/yyyy hh:mm:ss
, Я закончил использование дата-евро-плагин.
Все, что нужно сделать-это:
Шаг 1: включить модуль сортировки файл JavaScript или код и;
Шаг 2: добавить columnDefs
как показано ниже на цели соответствующие колонка(ы).
$('#example').dataTable( {
columnDefs: [
{ type: 'date-euro', targets: 0 }
]
});
на случай, если у кого-то возникли проблемы, когда у них есть пробелы либо в значениях даты, либо в ячейках, вам придется обрабатывать эти биты. Иногда пустое пространство не обрабатывается функцией trim, исходящей из html, это похоже на"$nbsp;". Если вы не обработаете их, ваша сортировка не будет работать должным образом и сломается там, где есть пустое место.
Я получил этот бит кода от расширений jquery здесь тоже и немного изменил его в соответствии с моим требованием. Ты должен это сделать. то же самое:) ура!
function trim(str) {
str = str.replace(/^\s+/, '');
for (var i = str.length - 1; i >= 0; i--) {
if (/\S/.test(str.charAt(i))) {
str = str.substring(0, i + 1);
break;
}
}
return str;
}
jQuery.fn.dataTableExt.oSort['uk-date-time-asc'] = function(a, b) {
if (trim(a) != '' && a!=" ") {
if (a.indexOf(' ') == -1) {
var frDatea = trim(a).split(' ');
var frDatea2 = frDatea[0].split('/');
var x = (frDatea2[2] + frDatea2[1] + frDatea2[0]) * 1;
}
else {
var frDatea = trim(a).split(' ');
var frTimea = frDatea[1].split(':');
var frDatea2 = frDatea[0].split('/');
var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + frTimea[2]) * 1;
}
} else {
var x = 10000000; // = l'an 1000 ...
}
if (trim(b) != '' && b!=" ") {
if (b.indexOf(' ') == -1) {
var frDateb = trim(b).split(' ');
frDateb = frDateb[0].split('/');
var y = (frDateb[2] + frDateb[1] + frDateb[0]) * 1;
}
else {
var frDateb = trim(b).split(' ');
var frTimeb = frDateb[1].split(':');
frDateb = frDateb[0].split('/');
var y = (frDateb[2] + frDateb[1] + frDateb[0] + frTimeb[0] + frTimeb[1] + frTimeb[2]) * 1;
}
} else {
var y = 10000000;
}
var z = ((x < y) ? -1 : ((x > y) ? 1 : 0));
return z;
};
jQuery.fn.dataTableExt.oSort['uk-date-time-desc'] = function(a, b) {
if (trim(a) != '' && a!=" ") {
if (a.indexOf(' ') == -1) {
var frDatea = trim(a).split(' ');
var frDatea2 = frDatea[0].split('/');
var x = (frDatea2[2] + frDatea2[1] + frDatea2[0]) * 1;
}
else {
var frDatea = trim(a).split(' ');
var frTimea = frDatea[1].split(':');
var frDatea2 = frDatea[0].split('/');
var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + frTimea[2]) * 1;
}
} else {
var x = 10000000;
}
if (trim(b) != '' && b!=" ") {
if (b.indexOf(' ') == -1) {
var frDateb = trim(b).split(' ');
frDateb = frDateb[0].split('/');
var y = (frDateb[2] + frDateb[1] + frDateb[0]) * 1;
}
else {
var frDateb = trim(b).split(' ');
var frTimeb = frDateb[1].split(':');
frDateb = frDateb[0].split('/');
var y = (frDateb[2] + frDateb[1] + frDateb[0] + frTimeb[0] + frTimeb[1] + frTimeb[2]) * 1;
}
} else {
var y = 10000000;
}
var z = ((x < y) ? 1 : ((x > y) ? -1 : 0));
return z;
};
Datatables только может приказать DateTime в "ISO-8601" формат, поэтому вы должны преобразовать свою дату в "date-order" в этот формат (пример использования Razor):
<td data-sort="@myDate.ToString("o")">@myDate.ToShortDateString() - @myDate.ToShortTimeString()</td>
об обновлении#1, Есть 2 проблемы:
- количество дней = 1 (Д/мм/гггг) вместо (ДД/ММ / гггг)
- пустая дата
вот это решение, чтобы избежать этих проблем :
jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function (a, b) {
var ukDatea = a.split('/');
var ukDateb = b.split('/');
//Date empty
if (ukDatea[0] == "" || ukDateb[0] == "") return 1;
//need to change Date (d/MM/YYYY) into Date (dd/MM/YYYY)
if(ukDatea[0]<10) ukDatea[0] = "0" + ukDatea[0];
if(ukDateb[0]<10) ukDateb[0] = "0" + ukDateb[0];
var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
//Sorting by Date
jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function (a, b) {
var ukDatea = a.split('/');
var ukDateb = b.split('/');
//Date empty
if (ukDatea[0] == "" || ukDateb[0] == "") return 1;
//MANDATORY to change Date (d/MM/YYYY) into Date (dd/MM/YYYY)
if(ukDatea[0]<10) ukDatea[0] = "0" + ukDatea[0];
if(ukDateb[0]<10) ukDateb[0] = "0" + ukDateb[0];
var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
Я получил решение после работы над ним целый день. Это маленькое хакерское решение добавило промежуток внутри тега td
<td><span><%= item.StartICDate %></span></td>.
формат даты, который Im использует dd/MM / YYYY. Протестировано в Datatables1.9.0