TableSorter는 JavaScript를 이용하여 HTML 테이블을 정렬하고 필터링하는 jQuery 플러그인입니다. 테이블에 있는 숫자 값을 가지고 수합, 평균 등을 계산하고 결과를 보여주는 기능을 추가해보겠습니다.

TableSorter 설정

먼저, TableSorter를 설정합니다. jQuery와 TableSorter 라이브러리를 로드한 후, 테이블을 선택하여 tablesorter() 메서드를 호출하면 됩니다.

$(document).ready(function(){
  $("#myTable").tablesorter();
});

플러그인 추가

TableSorter에 추가적인 기능을 제공하는 플러그인인 widget을 사용하여 필요한 수합 및 평균 기능을 활성화합니다.

$(document).ready(function(){
  $("#myTable").tablesorter({
    widgets: ['math']
  });
});

통계 값 추가

수합과 평균을 보여주기 위해 테이블 헤더 또는 푸터에 값을 표시할 열을 지정합니다.

<thead>
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>평균 점수</th>
  </tr>
</thead>
<tfoot>
  <tr>
    <th>합계</th>
    <th class="sum">2-3</th>
    <th class="average">4</th>
  </tr>
</tfoot>

위의 코드에서 합계를 표시할 열은 class="sum"을, 평균을 표시할 열은 class="average"를 추가했습니다.

이제 테이블을 로드하면 TableSorter가 자동으로 해당 열에 대한 수합과 평균 값을 계산하여 표시합니다.

위와 같이 손쉽게 TableSorter를 사용하여 테이블에 수합/평균 등의 통계값을 추가할 수 있습니다.

참고 자료

• TableSorter 공식 문서
• TableSorter 메서드 및 이벤트