테이블에 대량의 데이터가 있는 경우 사용자는 특정 항목을 찾기 위해 검색 기능을 원할 수 있습니다. TableSorter plugin을 사용하면 셀 검색 기능을 간단하게 추가할 수 있습니다.

TableSorter란?

TableSorter는 jQuery plugin으로, 테이블의 정렬, 페이지네이션, 필터링 등 다양한 기능을 제공합니다. 이를 이용하면 사용자가 원하는 정보를 더욱 쉽게 찾을 수 있습니다.

이제, 이러한 기능을 이용하여 TableSorter에 셀 검색 기능을 추가해 보겠습니다.

Step 1: TableSorter 적용

먼저 TableSorter를 테이블에 적용해야 합니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/tablesor‌ter/2.35.0/js/jquery.tablesorter.min.js"></script>

HTML 테이블에 TableSorter 적용하기

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

Step 2: 검색 기능 추가

이제 검색 기능을 추가해 보겠습니다.

검색 필드 추가

<input type="text" id="search" placeholder="Search..." />

셀 검색 기능 구현

$(document).ready(function(){
  $("#search").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

위 코드에서는 사용자가 검색 필드에 입력할 때마다, 테이블 행을 필터링하여 일치하는 셀만 표시하는 간단한 검색 기능을 구현했습니다.

위와 같이 TableSorter를 이용하여 테이블의 셀 검색 기능을 추가할 수 있습니다. 사용자가 원하는 데이터를 빠르게 찾을 수 있도록 도와주는 유용한 기능입니다.

더 많은 TableSorter 기능 및 옵션에 관심이 있다면 공식 문서를 참조하시기 바랍니다.

Happy coding! 🚀

참고 자료

• TableSorter 공식 문서