[javascript] TableSorter를 이용한 테이블의 셀에 숫자 포맷팅 기능 추가하기

18 Dec 2023

javascript

TableSorter는 테이블을 정렬하고 필터링하는 JavaScript 라이브러리로, 숫자를 올바르게 정렬하거나 표시하는 일반적인 숫자 포맷팅 기능을 제공하지는 않습니다. 그러나 이 기능을 추가할 수 있습니다.

이 블로그에서는 TableSorter를 사용하여 테이블의 셀에 숫자 포맷팅을 추가하는 방법을 알아보겠습니다.

1. TableSorter 및 필수 라이브러리 포함하기

먼저, HTML 문서에 TableSorter 및 필수 라이브러리를 포함해야 합니다. 예를 들어:

<!DOCTYPE html>
<html>
<head>
  <title>TableSorter 숫자 포맷팅</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.32.5/js/jquery.tablesorter.min.js"></script>
</head>
<body>
  <!-- 테이블 및 데이터 입력 -->
  <table id="myTable">
    <!-- 테이블 내용 -->
  </table>
</body>
</html>

2. 숫자 포맷팅 플러그인 추가하기

다음으로, 숫자 포맷팅 기능을 추가하기 위해 TableSorter의 숫자 포맷팅 플러그인을 포함해야 합니다. 이를 위해 필요한 파일을 다운로드하고 스크립트를 연결합니다.

<script src="path_to_your_script/jquery.tablesorter.widgets.js"></script>
<script src="path_to_your_script/widgets/widget-formatter.js"></script>

3. 포맷팅 옵션 정의하기

이제, 정수, 부동 소수점, 통화 등 특정 숫자 유형에 대한 포맷팅 옵션을 정의해야 합니다. 예를 들어:

$(function() {
  $("#myTable").tablesorter({
    widgets: ['formatter'],
    widgetOptions: {
      formatter_columns: {
        1: 'currency', // 두 번째 열에 대해 통화 포맷팅
        3: 'title' // 네 번째 열에 대해 제목 포맷팅
      }
    }
  });
});

이제 테이블을 정렬하고 필터링할 때 숫자가 올바르게 포맷팅되어 표시될 것입니다.

TableSorter를 사용하여 테이블의 셀에 숫자 포맷팅을 추가하는 방법에 대한 간단한 소개였습니다. 더 많은 포맷팅 옵션에 대해 알아보려면 TableSorter 공식 문서를 확인해 보세요.

참고 문헌:
https://mottie.github.io/tablesorter/docs/