TableSorter는 웹 페이지의 테이블을 정렬하고 필터링하는 기능을 제공하는 자바스크립트 라이브러리입니다. 사용자가 원하는 방식으로 테이블 내용을 정렬하고 필터링할 수 있도록 도와줍니다.

기본 사용법

TableSorter를 사용하려면 먼저 라이브러리를 웹 페이지에 포함시키고 정렬을 원하는 테이블에 tablesorter 클래스를 추가합니다. 그런 다음 자바스크립트로 TableSorter를 초기화하고 옵션을 설정할 수 있습니다.

// 테이블 정렬 초기화
$('#myTable').tablesorter({
  // 옵션 설정
  widgets: ['zebra'],
  sortList: [[0, 0]]
});

위 예제에서 #myTable은 정렬하려는 테이블의 ID입니다. widgets 옵션은 테이블에 줄무늬 스타일을 적용하고, sortList는 초기 정렬 순서를 설정합니다.

다양한 옵션과 설정

TableSorter는 다양한 옵션과 설정을 제공하여 테이블을 원하는 방식으로 조작할 수 있습니다. 몇 가지 유용한 옵션과 설정을 살펴보겠습니다.

테마 설정

TableSorter에는 다양한 테마가 내장되어 있어 원하는 디자인에 맞게 선택할 수 있습니다. 예를 들어, theme: 'blue'와 같이 테마를 설정할 수 있습니다.

초기 정렬 설정

초기 정렬을 설정하여 테이블이 로드될 때 특정 열로 정렬되도록 할 수 있습니다.

sortList: [[0, 0], [1, 0]] // 첫 번째 열로 오름차순, 두 번째 열로 내림차순 정렬

사용자 정의 파서

테이블 내의 특정 셀에 대한 사용자 정의 파서를 정의하여 데이터 형식을 인식하고 정렬할 수 있습니다.

headers: {
  0: { sorter: 'currency' }, // 첫 번째 열은 통화 형식으로 정렬
  1: { sorter: 'percent' } // 두 번째 열은 백분율 형식으로 정렬
}

위 설정은 첫 번째 열을 통화 형식으로, 두 번째 열을 백분율 형식으로 인식하여 정렬합니다.

TableSorter에는 이 외에도 다양한 옵션과 설정이 있으므로 사용자의 요구에 맞게 적절한 설정을 찾을 수 있습니다.

더 많은 정보를 보려면 TableSorter 공식 문서를 참조하세요.