[javascript] TableSorter를 이용한 테이블의 텍스트 검색 기능 구현하기

18 Dec 2023

javascript

TableSorter는 클라이언트 측 테이블 정렬 및 필터링 플러그인입니다. 테이블 내의 내용을 검색하고 관련 행을 필터링하여 사용자가 특정 데이터를 쉽게 찾을 수 있도록 도와줍니다. 이 튜토리얼에서는 TableSorter를 사용하여 테이블의 텍스트 검색 기능을 구현하는 방법에 대해 알아보겠습니다.

Step 1: TableSorter 및 관련 라이브러리 추가

우선, TableSorter와 jQuery 라이브러리를 웹 페이지에 추가해야 합니다. 로컬에서 파일로 라이브러리를 사용하거나 CDN을 통해 라이브러리를 로드하는 방법 중 하나를 선택할 수 있습니다. 다음은 CDN을 통해 TableSorter 및 jQuery를 추가하는 예시입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TableSorter 텍스트 검색</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.33.3/css/theme.default.min.css">
</head>
<body>
  <table id="myTable" class="tablesorter">
    <!-- 테이블 내용 추가 -->
  </table>
  <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>
</body>
</html>

Step 2: TableSorter 초기화 및 텍스트 검색 구성

웹 페이지의 스크립트 부분에서 TableSorter를 초기화하고 텍스트 검색 기능을 구성해야 합니다. 다음 예시 코드는 TableSorter를 초기화하고 텍스트 검색 위젯을 추가하는 방법을 보여줍니다.

$(document).ready(function(){
  $("#myTable").tablesorter();
  $("#myTable").tablesorter({
    widgets: ['filter'],
    widgetOptions : {
      filter_external : '.search',
      filter_defaultFilter: { 1: '~{query}' } // 두 번째 열에 대한 기본 필터 설정
    }
  });
});

위 코드에서 filter_external : '.search' 부분에 의해 텍스트 검색을 위한 외부 입력란이 지정됩니다. 또한, filter_defaultFilter를 사용하여 두 번째 열을 기본적으로 필터링 할 수 있도록 설정했습니다.

Step 3: 텍스트 검색을 위한 입력 필드 추가

마지막으로, 사용자가 텍스트를 입력할 수 있는 검색 입력 필드를 추가해야 합니다. 다음은 예시 코드입니다.

<input type="search" class="search" placeholder="Search...">

위 코드는 사용자가 텍스트를 입력할 수 있는 검색 입력 필드를 추가합니다. 이제 웹 페이지를 불러와서 테이블을 확인하고 텍스트 검색을 테스트할 수 있습니다.

이제 테이블의 텍스트 검색 기능을 구현하는 방법에 대해 알아보았습니다. TableSorter를 사용하여 테이블을 검색 및 필터링하는 기능을 추가함으로써 사용자 경험을 향상시킬 수 있습니다.

더 자세한 내용은 TableSorter 공식 문서를 참조할 수 있습니다.