테이블은 웹 애플리케이션에서 데이터 표시에 자주 사용됩니다. jQuery와 TableSorter 플러그인을 이용하면 열 머리글을 클릭하여 테이블을 손쉽게 정렬할 수 있습니다. 이번 글에서는 TableSorter를 사용하여 테이블의 셀에 아이콘을 추가하는 방법을 살펴보겠습니다.

TableSorter 및 jQuery 라이브러리 추가

먼저 HTML 문서 내에 jQuery와 TableSorter 라이브러리를 추가해야 합니다. 아래는 CDN을 통해 두 라이브러리를 추가하는 예시입니다.

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

테이블에 아이콘 추가

다음으로 테이블에 아이콘을 추가해보겠습니다. 예를 들어, “이름” 열에 오름차순 및 내림차순 정렬을 위한 화살표 아이콘을 추가하려면 다음과 같이 HTML을 작성합니다.

<table id="myTable" class="tablesorter">
  <thead>
    <tr>
      <th>이름 <i class="icon-sort"></i></th>
      <th>나이</th>
      <th>직업</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>Engineer</td>
    </tr>
    <tr>
      <td>Alice</td>
      <td>30</td>
      <td>Designer</td>
    </tr>
    <!-- 나머지 테이블 데이터 -->
  </tbody>
</table>

TableSorter 초기화 및 옵션 설정

마지막으로 TableSorter를 초기화하고 옵션을 설정합니다. 아래 코드는 테이블을 정렬 가능하도록 만들고, 아이콘을 클릭하면 해당 열을 기준으로 정렬되도록 하는 옵션을 설정한 예시입니다.

$(document).ready(function() {
  $("#myTable").tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'columns'],
    headers: { 0: { sorter: false } }
  });
});

위 예시에서 headers 옵션을 사용하여 첫 번째 열 (인덱스 0)은 정렬되지 않도록 설정했습니다.

마무리

이제 웹페이지를 불러와 테이블을 확인해보세요. “이름” 열에 아이콘이 표시되고, 해당 아이콘을 클릭하면 테이블이 정렬될 것입니다. TableSorter를 이용하여 테이블에 아이콘을 추가하고, 사용자가 편리하게 정렬할 수 있도록 만들었습니다.

참고 자료:

• TableSorter 공식 웹사이트
• jQuery 공식 웹사이트