웹 애플리케이션에서 데이터를 표 형식으로 표시할 때 종종 특정 열의 값을 기준으로 정렬하고 찾을 수 있는 기능을 제공해야 합니다. 만약 이미 TableSorter 플러그인을 사용 중이라면, 특정 열에 색인 기능을 추가하는 것은 매우 간단합니다.

TableSorter 플러그인 소개

TableSorter는 jQuery 기반의 유연하고 강력한 테이블 정렬 및 필터링 플러그인입니다. 이 플러그인을 사용하면 테이블의 열을 클릭하여 오름차순 및 내림차순으로 정렬할 수 있으며, 검색 기능을 추가할 수도 있습니다.

색인 열 추가하기

테이블에 색인(검색) 기능을 추가하려면 먼저 TableSorter 플러그인을 사용하여 테이블을 초기화해야 합니다. 그런 다음 특정 열에는 filter-parsed 클래스를 추가하고 해당 열에 색인 기능을 사용할 수 있도록 설정해야 합니다.

예를 들어, 번호 열에 색인 기능을 추가하려는 경우 다음과 같이 코드를 작성할 수 있습니다:

<th class="filter-parsed">번호</th>

JavaScript 코드 추가

마지막으로, 테이블이 로드된 후에 JavaScript에서 TableSorter를 설정해야 합니다. 다음과 같이 코드를 추가하여 테이블을 초기화하고 색인 열을 설정할 수 있습니다:

$(document).ready(function() {
  $("table").tablesorter({
    widgets: ['zebra'],
    headers: {
      0: { filter: true }
    }
  });
});

위 코드에서 0은 번호 열의 인덱스를 나타냅니다. 따라서 해당 열에 색인 기능이 추가됩니다.

이제 테이블을 새로고침하면 번호 열에 색인 입력란이 나타나고, 사용자는 해당 입력란을 사용하여 특정 값을 찾을 수 있습니다.

TableSorter 플러그인의 강력한 정렬 및 검색 기능을 활용하여 사용자 친화적이고 기능적인 테이블을 만들어 보세요!

더 많은 정보 및 예제에 대한 자세한 내용은 TableSorter 공식 문서를 참조하세요.