[javascript] TableSorter를 사용한 테이블의 레이아웃 변경하기

18 Dec 2023

javascript

TableSorter는 jQuery 플러그인으로, HTML 테이블의 정렬과 필터링을 구현하는 데 사용됩니다. 이 플러그인을 사용하면 테이블 열의 내용을 정렬하고, 필터링 하거나 테이블의 레이아웃을 변경할 수 있습니다.

이 블로그 게시물에서는 TableSorter를 사용하여 테이블의 레이아웃을 변경하는 방법에 대해 알아보겠습니다.

TableSorter 추가하기

먼저 TableSorter를 웹 페이지에 추가해야 합니다. 다음과 같이 jQuery와 TableSorter를 포함하는 스크립트를 <head> 태그 안에 추가합니다.

<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.4/js/jquery.tablesorter.min.js"></script>

HTML 테이블 구조

다음으로, 테이블을 작성하고 테이블 헤더에 TableSorter가 작동할 수 있도록 class="tablesorter"를 추가합니다.

<table class="tablesorter">
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
      <th>이메일</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>25</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>30</td>
      <td>jane@example.com</td>
    </tr>
  </tbody>
</table>

JavaScript 초기화

마지막으로, TableSorter를 초기화하고 선택적인 옵션을 사용하여 테이블을 정의합니다.

$(document).ready(function(){
  $(".tablesorter").tablesorter({
    // 옵션들을 추가할 수 있습니다.
  });
});

결론

TableSorter를 사용하여 테이블의 레이아웃을 변경하는 방법을 알아보았습니다. 이를 통해 HTML 테이블을 보다 효율적으로 정렬하고 필터링할 수 있습니다. TableSorter의 다양한 옵션을 통해 사용자 정의된 테이블을 만들 수 있으며, 더 많은 정보는 TableSorter 공식 문서에서 확인하실 수 있습니다.