[JS]Datatables dateType data sorting [데이터테이블 날짜데이터 정렬하기]

DataTables 라이브러리를 사용하면서

 

옵션으로 sorting 하는 기능을 자주사용하는데

 

sort 컬럼을 날짜데이터 컬럼을 설정하여 정렬시에는

 

제대로 정렬이 되지 않는 현상들이 나타난다.

 

이는 JavaScript에서는 데이터 형식을 따로 지정해 주지 않기 때문에 

 

date type 형태의 데이터를 문자열로 읽어 정렬 했기 때문인데

 

간단하게 해결하는 방법이 존재한다!

 

---

 

1. date-eu.js 파일 import 

 

date-eu.js 파일을 직접 다운로드 받아서 추가하거나 또는 아래코드를 추가한다.

 

<script src="https://cdn.datatables.net/plug-ins/1.10.12/sorting/date-eu.js"></script>

 

 

 

2. dataTable 생성 옵션을 아래와 같이 구성한다.

 

var dataTable = $('#example').DataTable({
data: data,
columns: [
{
"type": "date-eu",
"data": "date"
},
{"data": "data1"},
{"data": "data2"},
{"data": "data3"}
]

위 코드를 살펴보면

 

첫번 째 컬럼이 dateType의 형태의 데이터라고 가정했을 때 작성한 코드이다.

 

dateType인 컬럼에 "type" : "date-eu" 라고 추가해준다.

 

이 코드는 날짜 데이터가 'dd/mm/yyyy' 형태의 문자열로  들어가야 정상적으로 작동한다.

 

찾아보니 'dd/mm/yyyy' 형태의 날짜 데이터를 date-eu 라고 부르는 것 같다.

 

 

 

만약 가지고있는 데이터 형식이 다르다면 바꾸어서 넣어주는 방법이 있다.

columnDefs: [
       {
           "render": function ( data, type, row ) {
               var sp = data.split("/");
               return sp[1]+ "/"+ sp[0] + "/" +sp[2];
           },
           "targets": 0
       }
            ]

위와 같이 columnDefs 옵션을 이용하여

 

script 상에서 수정이 가능한데,

 

위 코드는 필자가 'mm/dd/yyyy' 형태로 데이터를 가지고 있어서

 

date-eu 형태로 바꿔서 랜더링한 코드로

 

이를 참고하여 적절하게 수정하여 사용하면 되겠다.

 

이 내용은 DataTable 옵션에서 colums 옵션 아래에 추가로 선언해주면 된다.