웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
부트스트랩(Bootstrap)의 DataTable을 사용하는 경우 테이블 정렬, sorting 방법입니다. (참고로 데이터테이블은 ajax를 사용하여 불러온 데이터를 기반으로 손쉽게 테이블 UI를 그려주는 라이브러리, 툴입니다.)
# DataTable 정렬하는 방법
DataTable의 정렬 설정은 어떻게 할까요? 이 경우 설정값에 추가로 order 및 ordering를 추가하여 가능합니다. 아래와 같이 말이죠.{
order: [[3, 'desc']],
ordering: true,
...
}
order: [[3, 'desc']],
ordering: true,
...
}
여기서 사용된 order와 ordering은 다음의 의미를 가지고 있습니다.
- order : <array> 정렬 기준과 오름차순, 내림차순 설정
- ordering : <boolean> 정렬 사용 여부
참고로 오름, 내림 차순의 경우 각각 'asc', 'desc' 값을 사용합니다. 또한 여러 개의 정렬로 설정 가능하기 때문에 order를 설정할 경우 배열로 추가해야 하죠.
! DataTable 간단한 정렬 예제
그렇다면 간단한 예제를 만들어 보겠습니다. myTable이름의 id를 가진 데이터 테이블을 사용하고자 합니다. 아래를 봐주세요.$('#myTable').DataTable({
order: [[3, 'desc']],
ordering: true,
serverSide: false
});
order: [[3, 'desc']],
ordering: true,
serverSide: false
});
매우 간단한 예제입니다. 위 예제를 살펴보면... 정렬 기준은 3번째 index 위치로 설정하였습니다. 정렬시 차순의 방향은 desc 값으로 오름차순으로 정렬한 설정 값입니다. 그리고 ordering: true로 설정하였죠.
! 알아둘 내용
여기서 사용된 두 가지 설정값 ordering: true, serverSide: false 값은 정렬ㄹ을 위해 필요한 값입니다. 없는 경우 동작하지 않을 수 있으니 참고하세요.추가로 컬럼명의 이름으로 정렬하는 방법은 현재 구현하기 어렵습니다. 그래서 반드시 정렬 할 경우 해당 컬럼을 추가하여 테이블에 추가하여야합니다. 만약 필요가 없다면 css를 사용하여 숨김 처리하는 것 역시 사용되는 방법 중 하나입니다. 여기까지 데이터테이블에서 정렬을 사용하는 방법에 대하여 알아봤습니다.
아래의 글도 찾고 계시지 않나요?