dd/mm/yyyy 문제를 정렬할 수 있는 날짜
저는 datatables라는 Jquery 플러그인을 사용하고 있습니다.
환상적이지만 날짜를 dd/mm/yyyyy 형식에 맞게 정확하게 정렬할 수 없습니다.
그들의 지원 형식을 살펴보았지만 이 중 어느 것도 효과가 없는 것 같습니다.
여기 누가 저 좀 도와주실 수 있나요?
업데이트 2020: HTML 솔루션
HTML 5는 매우 많이 개발되어 있고 거의 모든 주요 브라우저가 이를 지원하기 때문입니다.그래서 지금은 HTML5 data attributes (maxx777은 내가 사용하고 있는 단순 HTML의 PHP 솔루션이라면)를 사용하는 것이 훨씬 더 깔끔한 접근법입니다. 우리의 시나리오와 같이 숫자가 아닌 데이터의 경우, 우리는data-sort아니면data-order분류 가능한 값을 지정하고 할당합니다.
HTML
<td data-sort='YYYYMMDD'>DD/MM/YYYY</td>
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
]
});
});
날짜 정렬 - 숨김 요소 있음
날짜를 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();
});
이런 식으로 효과가 있었습니다.
<td data-order="@item.CreatedOn.ToString("MMddyyyyHHmmss")">
@item.CreatedOn.ToString("dd-MM-yyyy hh:mm tt")
</td>
의 의 형식data-order속성은 DataTable에서 지원하는 이 형식이어야 합니다.
momentus.js 또는 다른 날짜 형식을 사용하지 않으려면 날짜 값에 날짜 형식(밀리초 단위)을 붙여 정렬을 밀리초 단위로 읽을 수 있습니다.그리고 밀리초 단위의 날짜 형식을 숨깁니다.
샘플 코드:
var date = new Date();
var millisecond = Date.parse(date);
HTML
<td>'<span style="display: none;">' + millisecond + "</span>" + date + </td>
바로 그겁니다.
이 문제는 php로 해결할 수 있습니다.
$mydate = strtotime($startdate);
$newformat = date('d-m-Y',$mydate);
echo '<tr>';
echo ' <td data-sort="'. $mydate .'">'.$newformat .'</td>';
또 다른 솔루션: https://datatables.net/blog/2014-12-18
2개의 자바스크립트 라이브러리와 함께:
- 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();
});
질문에 대한 답변이 매우 많지만, 데이터 정렬은 "YYYYMMDD"에서 정렬이 필요한 경우에만 작동하며, Hour/Minutes가 있는 동안에는 작동하지 않는다고 생각합니다.data-sort를 사용하는 동안 필터가 제대로 작동하지 않아, 적어도 나는 React JS에서 시도하다가 그런 문제가 있었습니다.
제 생각에 가장 좋은 해결책은 data-order를 사용하는 것입니다. 값은 정렬 목적에 맞게 동적으로 제공될 수 있고 표시하는 동안 형식이 다를 수 있기 때문입니다.이 솔루션은 강력하며 "DD/MM/YYYYH:M"을 비롯한 모든 날짜 형식에 적합합니다.
예를 들어,
<td data-order={obj.plainDateTime}>{this.formattedDisplayDate(obj.plainDateTime) }</td>
여기서 이 솔루션을 찾았습니다. 데이터 테이블의 숨겨진 열을 기준으로 정렬하려면 어떻게 해야 합니까?
나는 이것을 시도했고 나를 위해 일했습니다.
https://github.com/sedovsek/DataTables-EU-date-Plug-In
는 포맷 모드 했습니다 했습니다..ToString("dd/MM/yyyy");◦ jQuery는.데이터 테이블은 정상적으로 작동합니다.
아래 jQ
oTable = $('#grid').dataTable({
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sType": "eu_date" },
null
]
});
});
날짜가 있는 열은 위의 코드와 같이 sType으로 정의해야 합니다.
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]}}
]
});
이미 영국에서 작성된 날짜를 처리해야 한다면 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"라는 정의가 뒤따릅니다.
이 솔루션은 완전히 잘못된 것입니다.날짜를 날짜의 각 구성요소를 추가하는 숫자로 변환할 수 없습니다.예를 들어 다음 날짜를 사용하여 이 논리를 시도하면 일치하지 않는 것을 알 수 있습니다.
20/01/2014 = 2035 15/02/2014 = 2031
마녀 데이트가 먼저야, 상승?1월 20일?이 논리에 따르지 않음:P
구문 분석 방법을 수행하는 올바른 방법은 문자열을 유효한 날짜 시간으로 변환하는 것이며 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를 경유하여 서버의 데이터를 사용할 때 솔루션이 매우 간단하지만 즉시 명확하지 않을 수 있다는 점을 지적하고 싶었습니다.
배열을 때( 할 이 합니다 을 이 합니다 )를 보냅니다.$_POST) 다음과 같은 2요소 배열:
$_POST['order'][0] =array('column'=>'SortColumnName', 'dir'=>'asc');
// 2nd element is either 'asc' or 'desc'
할 수 . 에서 "" " " " " " " " " " " " " " " "에 기준을 반환하도록 . 서버가 다음 항목에만 기반하여 정렬 기준을 반환하도록 하십시오.sortColumnName.
예를 들어, (MySQL과 함께) PHP에서는 다음을 사용합니다.
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의 .
이 토막글을 사용하세요!
$(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년 03월 21일처럼 스팬을 사용하고 있었는데, 이렇게 해서 데이터테이블에서 문자열로 처리하고 정렬이 되지 않았습니다.
td 안에 스팬을 제거했더니 고정이 되었습니다.마치, 03/21/2017
나는 휴식 통화에서 사용했습니다.
**날짜 변수: 생성됨 **
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과 같이 1번째 열의 항목을 정렬하지만 날짜는 정렬하지 않는다는 것입니다.소스 코드를 사용하여 dd/mm/yyyy에서 yyy/mm/dd로 날짜 형식을 변경할 수 있는 경우 "aaSorting"이 적절하게 작동합니다.
을 합니다.data-ordern.<td>태그는 다음과 같습니다(Ruby 예제).
<td data order='<%=rentroll.decorate.date%>'><%=rentroll.decorate.date%></td>
장식가 기능은 다음과 같습니다.
def date
object.date&.strftime("%d/%m/%Y")
end
데이터베이스에서 날짜를 가져온 후 각 행에 대한 for loop을 수행하고 자바스크립트에서 사용할 문자열에 추가하여 데이터 테이블을 자동으로 채울 경우에는 이렇게 해야 합니다.숨겨진 스팬 트릭을 사용할 때는 6시간이면 정렬에서 스팬 트릭이 작동하지 않기 전에 0을 추가해야 하는 것처럼 날짜의 한 자리 숫자를 설명해야 합니다.코드 예:
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>");
시도해 보기:
"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에서 Datable 스크립트가 완료된 후 아래 코드를 유지합니다.
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 날짜가 나옵니다.
문제의 출처는 날짜 시간 형식입니다.
잘못된 샘플: "MM-dd-yyyy H:mm", "MM-dd-yyyyy"
올바른 샘플: "MM-dd-yyyy HH:mm"
가장 간단한 방법은 열의 모든 TD 태그에 날짜 이전에 숨겨진 타임스탬프를 추가하는 것입니다. 예를 들어:
<td class="sorting_1">
<span class="d-none">1547022615</span>09/01/2019 09:30
</td>
기본 문자열 순서를 지정하면 타임스탬프가 원하는 방식으로 열 순서를 지정하고 브라우저에서 렌더링할 때 표시되지 않습니다.
UTC 포맷이나 다른 것에 어려움을 겪고 있는 사람은 누구나 읽을 수 있습니다.
이 형식의 날짜가 있다고 가정합니다.
2019년 10월 15일 화요일 08:41:35 GMT+0000 (UTC)
먼저 모멘트를 사용하여 밀리초 단위로 변환할 수 있습니다.
예를 들어, 제 경우에는 HandleBar.js를 사용하고 있었습니다.그래서 좀 더 간단하게 헬퍼 기능을 만들었습니다.
hbs.registerHelper('dateformat', function (datetime) {
return moment(datetime).valueOf(); })
아니면
그냥 이런 식으로 바꿔요.
moment("Tue Oct 15 2019 08:41:35 GMT+0000 (UTC)").valueOf();
완료되면 테이블에 이 값을 전달합니다.
여기서의 요령은 둘 다 통과해서 밀리초 안에 하나를 숨기고 UTC 형식으로 하나를 보여주는 것입니다.
<td >
<span class="hideThisDate">{{DATA IN MILLISECONDS}}</span>
{{YOUR DATE IN NORMAL FORMAT}}</td>
이제 CSS를 통해 밀리초 안에 하나를 숨기기만 하면 됩니다.
.hideThisDate {
display:none;
}
그리고 당신은 가도 좋습니다!
저도 독트린과 함께 일하는 동안 같은 문제를 겪었습니다.데이터가 데이터베이스에서 올바르게 정렬되었습니다.orderBy('p.updatedAt', 'DESC'), 그러나 DataTable이 이들을 처리했을 때 최종 결과는 완전히 달라졌습니다.
이 문제를 해결하는 가장 쉬운 방법은 테이블에 숨겨진 컬럼 타임스탬프를 추가한 다음 날짜별로 주문할 때 이 컬럼으로 주문하는 것입니다.여기에 완전한 기능 예시가 있습니다.
<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]);
}
})
});
서버측 정렬에 문제가 있는 경우 jsut은 다음을 확인합니다.visual열 인덱스가 응답에서 나온 인덱스에 해당합니다.
<thead>
<th>Column0</th>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</thead>
$columns = array(
array( 'db' => 'Column0', 'dt' => '0', 'field' => 'Column0' ),
array( 'db' => 'Column1', 'dt' => '4', 'field' => 'Column1' ),// looks ad 'dt' value
array( 'db' => 'Column2', 'dt' => '2', 'field' => 'Column2' ),
array( 'db' => 'Column3', 'dt' => '3', 'field' => 'Column3' ),
array( 'db' => 'HelperColumn', 'dt' => '1', 'field' => 'HelperColumn' )
);
이 경우, 정렬을 클릭하면column1그것은 아마도 당신의 테이블을 다음에 따라 분류할 것입니다.helperColumn이 경우, 컬럼의 요청 인덱스는 다음과 같이 전달됩니다.order 변수수order: [{column: "1", dir: "asc"}]
적어도 이것은 나에게 문제였습니다.
첫번째 답은 맞지만 명확하지 않아요, 사람들은 저도 헷갈릴 것입니다.
하지만 이제 나는 내가 사용한 샘플 날짜가 있는 하나의 샘플 요소 아래에서 논리를 찾았습니다.
<td data-sort="2023-04-20">
20-04-2023
</td>
효과가 있을 겁니다. 논리는:-
1년차 - 1순위
월 - 2순위
day - 3순위
날짜 데이터 정렬용
언급URL : https://stackoverflow.com/questions/12003222/datatable-date-sorting-dd-mm-yyyy-issue
'programing' 카테고리의 다른 글
| Paginated API가 적용된 Spring Rest Template (0) | 2023.09.09 |
|---|---|
| 깃에서 커밋식과 트리식은 무엇입니까? (0) | 2023.09.09 |
| MySQL의 상관된 하위 쿼리에서 메인 where stmt에 "column"을 포함할 수 없음 (0) | 2023.09.09 |
| 봄에 일정이 겹치지 않게 하는 방법은? (0) | 2023.09.09 |
| HTML 버튼의 텍스트를 고정된 너비로 래핑하는 방법은? (0) | 2023.09.09 |