[javascript] TableSorter를 이용한 테이블에 페이드 인/아웃 효과 적용하기

18 Dec 2023

javascript

테이블을 사용하여 데이터를 표시하는 웹 애플리케이션에서는 사용자가 데이터를 정렬하거나 필터링하는 기능이 필요합니다. TableSorter는 테이블을 정렬하고 필터링하는 jQuery 플러그인 중 하나입니다. 이제 해당 플러그인을 사용하여 테이블의 행에 페이드 인/아웃 효과를 적용하는 방법에 대해 살펴보겠습니다.

TableSorter와 jQuery 라이브러리 로드

먼저, HTML 파일의 <head> 섹션에 TableSorter와 jQuery 라이브러리를 로드합니다. 아래의 코드를 사용하여 두 라이브러리를 로드할 수 있습니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.33.3/js/jquery.tablesorter.min.js"></script>

CSS 스타일 적용

다음으로, CSS를 사용하여 페이드 인/아웃 효과에 필요한 스타일을 정의합니다. 아래의 코드는 간단한 예시입니다.

<style>
  .fade-in-out {
    transition: opacity 0.5s;
    opacity: 1;
  }
  .fade-in-out.fade-out {
    opacity: 0;
  }
</style>

JavaScript로 테이블과 효과 설정

마지막으로, JavaScript를 사용하여 TableSorter 플러그인을 초기화하고 페이드 인/아웃 효과를 적용합니다.

$(document).ready(function(){
  // TableSorter 초기화
  $("#myTable").tablesorter();

  // 테이블 행에 효과 적용
  $("tbody tr").on("click", function(){
    $(this).toggleClass("fade-out");
  });
});

위의 코드에서 #myTable은 테이블의 ID에 대한 샘플입니다. 실제 테이블의 ID에 맞게 코드를 수정해야 합니다.

이제 테이블의 행을 클릭할 때마다 페이드 인/아웃 효과가 적용됩니다. 이렇게하면 TableSorter와 함께 테이블을 사용하는 동안 사용자가 행을 선택할 때 시각적인 피드백을 제공할 수 있습니다.

페이드 인/아웃 효과를 무엇인가 동작할 때 클릭하는 것은 좋은 경험을 제공하므로 활용하기에 좋은 기능이며 이는 사용자의 요구에 따라 선택적으로 구현할 수 있습니다.

참고 문헌: TableSorter 공식 문서