데이터 테이블 날짜 정렬 dd / mm / yyyy 문제
datatables 라는 Jquery 플러그인을 사용하고 있습니다.
환상적이지만 dd / mm / yyyy 형식에 따라 날짜를 올바르게 정렬 할 수 없습니다.
지원 형식을 살펴 보았지만 이러한 수정 사항 중 어느 것도 작동하지 않는 것 같습니다.
여기 아무도 제발 도와 줄 수 있습니까?
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));
}
} );
위의 코드를 스크립트에 추가하고 Date 값이있는 특정 열을 { "sType": "date-uk" }null로 설정합니다. 아래를 참조하세요.
$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
null,
null,
null,
null,
{ "sType": "date-uk" },
null
]
});
});
CSS 솔루션
빠른 솔루션을 원한다면 특정 형식 (YYYYMMDD)의 각 행에 실제 DateTime 값을 추가하고 CSS를 사용하여 숨길 수 있습니다. 그러면 자바 스크립트 변경없이 해당 열을 정렬 할 수 있습니다.
HTML
<td><span class='hide'>YYYYMMDD</span>DD/MM/YYYY</td>
CSS
.hide {
display:none;
}
날짜 정렬-숨겨진 요소 포함
날짜를 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;
}
나는 이것이 오래된 질문이라는 것을 알고 있으며 답변도 오래되었습니다. 최근에 간단하고 깔끔한 날짜 정렬 방법을 발견했습니다. 요소 에 대한 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>
이 플러그인을 사용해보십시오 .
여기에 설명 된대로 Moment.js 및 datatable-moment 플러그인 을 포함 하고 사용중인 날짜 형식을 선언하면됩니다. 플러그인은 날짜 열을 자동으로 감지하고 원래대로 정렬합니다. moment.js 형식에 대한 설명은 여기를 확인 하십시오 .
예:
$(document).ready(function() {
$.fn.dataTable.moment('DD/MM/YYYY HH:mm');
$('#example').DataTable();
});
다른 솔루션 : https://datatables.net/blog/2014-12-18
2 개의 자바 스크립트 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();});
momentum.js 또는 다른 날짜 형식을 사용하지 않으려면 날짜 값에 밀리 초 단위로 날짜 형식을 추가하여 정렬이 밀리 초 단위로 읽히도록 할 수 있습니다. 그리고 밀리 초 날짜 형식을 숨 깁니다.
샘플 코드 :
var date = new Date();
var millisecond = Date.parse(date);
HTML
<td>'<span style="display: none;">' + millisecond + "</span>" + date + </td>
그게 다야.
PHP 또는 js에서는 배열을 전달하고 다음과 같이 직교를 사용합니다.
$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]}}
]
});
이 문제는 php로 해결할 수 있습니다.
$mydate = strtotime($startdate);
$newformat = date('d-m-Y',$mydate);
echo '<tr>';
echo ' <td data-sort="'. $mydate .'">'.$newformat .'</td>';
이 방법은 나를 위해 일했습니다.
<td data-order="@item.CreatedOn.ToString("MMddyyyyHHmmss")">
@item.CreatedOn.ToString("dd-MM-yyyy hh:mm tt")
</td>
data-order속성 의이 날짜 형식은 DataTable에서 지원하는이 형식이어야합니다.
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"정의가 뒤 따릅니다.
나는 이것을 시도하고 나를 위해 일했습니다.
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으로 정의해야합니다.
이 솔루션은 완전히 잘못되었습니다. 날짜의 각 구성 요소를 추가하기 만하면 날짜를 숫자로 변환 할 수 없습니다. 예를 들어 다음 날짜로이 논리를 시도하면 올바르게 일치하지 않는 것을 볼 수 있습니다.
2014 년 1 월 20 일 = 2035 2014 년 2 월 15 일 = 2031
마녀 데이트가 먼저 오름차순? 1 월 20 일? 이 논리에 따르면 : P
구문 분석 메서드를 수행하는 올바른 방법 은 문자열을 유효한 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합니다 (에 보낼 $_POST2 소자 어레이) 와 동등하게 하기 :
$_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;";
쿼리를 실행하고 dateStartedjson의 Datatables에 값만 반환합니다 .
이 스 니펫을 사용하십시오!
$(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가 모든 날짜 및 시간 형식에서 잘 작동하는 순간 이전에했던 것처럼 데이터 테이블을 초기화하기 전에이 스니퍼를 추가하십시오.
또한 http://momentjs.com/ 을로드해야합니다 .
나도 같은 문제가 있습니다.
나는 2017 년 3 월 21 일과 같이 td에서 span을 사용하고 있었는데, 이렇게하면 datatable이 이것을 문자열로 처리하고 정렬이 작동하지 않았습니다.
나는 td 내부의 스팬을 제거하고 수정되었습니다. 좋아요, 2017 년 3 월 21 일
나머지 통화에 사용
** 날짜 변수 : 생성됨 **
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나를 위해 일하는 것처럼 보이는 것은
데이터 테이블 형식 "2018-01-05 08:45:56"로 그려지는 데이터 세트의 내 db에서 선택 쿼리로 가져온 전체 datetime 개체를 푸시합니다.
그때
$('#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']
});
여기서 문제는이 예제가 STRING과 같은 첫 번째 열의 항목을 정렬하지만 날짜와는 다르다는 것입니다. 소스 코드에서 날짜 형식을 dd / mm / yyyy에서 yyyy / mm / dd로 변경할 수있는 경우 "aaSorting"이 제대로 작동합니다.
Use the data-order attribute on the <td> tag like so (Ruby Example):
<td data order='<%=rentroll.decorate.date%>'><%=rentroll.decorate.date%></td>
Your decorator function here would be:
def date
object.date&.strftime("%d/%m/%Y")
end
If you get your dates from a database and do a for loop for each row and append it to a string to use in javascript to automagically populate datatables, it will need to look like this. Note that when using the hidden span trick, you need to account for the single digit numbers of the date like if its the 6th hour, you need to add a zero before it otherwise the span trick doesn't work in the sorting.. Example of code:
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>");
Try this:
"aoColumns": [
null,
null,
null,
null,
{"sType": "date"}, // "sType": "date" TO SPECIFY SORTING IS APPLICABLE ON DATE
null
]
To the column you want ordering keep "sType": "date-uk" for example:-"data": "OrderDate", "sType": "date-uk" After the completion of Datatable script in ajax keep the below code
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));
}
});
Then You will get date as 22-10-2018 in this format
Problem source is datetime format.
Wrong samples: "MM-dd-yyyy H:mm","MM-dd-yyyy"
Correct sample: "MM-dd-yyyy HH:mm"
The simpliest way is to add a hidden timestamp before the date in every TD tag of the column, for example:
<td class="sorting_1">
<span class="d-none">1547022615</span>09/01/2019 09:30
</td>
With the default string ordering, a timestamp would order the column the way you want and it will not be shown when rendered in the browser.
ReferenceURL : https://stackoverflow.com/questions/12003222/datatable-date-sorting-dd-mm-yyyy-issue
'development' 카테고리의 다른 글
| 이전 편집 위치로 돌아가는 방법 (0) | 2020.12.31 |
|---|---|
| / sdcard에 디렉토리 생성 실패 (0) | 2020.12.31 |
| 파이썬에서 문자열을 문자 목록으로 나누기 (0) | 2020.12.31 |
| NSLog (@ "Inside of the iPhone Simulator")로 어떻게 디버깅합니까? (0) | 2020.12.31 |
| 일반 목록의 표준 편차? (0) | 2020.12.31 |