[javascript] jQuery를 사용한 테이블 정렬과 필터링 방법

01 Dec 2023

javascript

테이블은 웹 개발에서 자주 사용되는 요소 중 하나입니다. 이번 글에서는 JavaScript 라이브러리인 jQuery를 사용하여 테이블의 정렬과 필터링 기능을 구현하는 방법을 알아보겠습니다.

1. 테이블 정렬

테이블의 특정 열을 기준으로 정렬하기 위해서는 sort 메서드를 사용합니다. 우선, 테이블의 thead 요소 내에 있는 각 열의 제목을 클릭하면 해당 열을 기준으로 테이블이 정렬되도록 하는 코드를 작성해보겠습니다.

$(document).ready(function(){
    $('th').click(function(){
        var table = $(this).parents('table').eq(0);
        var rows = table.find('tr:gt(0)').toArray().sort(comparator($(this).index()));
        this.asc = !this.asc;
        if (!this.asc){ rows = rows.reverse(); }
        for (var i = 0; i < rows.length; i++){ table.append(rows[i]); }
    });
});

function comparator(index) {
  return function(a, b) {
    var valA = getCellValue(a, index);
    var valB = getCellValue(b, index);
    return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB);
  };
}

function getCellValue(row, index){
    return $(row).children('td').eq(index).text();
}

위 코드는 th 요소를 클릭하면 해당 열을 기준으로 테이블을 정렬해주는 코드입니다. 이 코드를 적용하면 테이블의 각 열을 클릭하면 오름차순 또는 내림차순으로 테이블이 정렬됩니다.

2. 테이블 필터링

테이블의 내용을 필터링하여 특정 조건에 맞는 행만 표시되도록 하려면, 입력필드를 통해 사용자가 원하는 값을 입력받아 필터링하는 기능을 구현해야 합니다. 아래 예제 코드는 테이블의 각 행에서 입력필드의 값과 일치하는 행만 보여주는 기능을 구현한 예제입니다.

$(document).ready(function(){
    $('#filterInput').keyup(function(){
        var filterValue = $(this).val().toLowerCase();
        $('table tbody tr').filter(function(){
            $(this).toggle($(this).text().toLowerCase().indexOf(filterValue) > -1);
        });
    });
});

위 코드는 filterInput이라는 id를 가진 입력필드에 값을 입력할 때마다 테이블의 행을 필터링하여 일치하는 행만 보여줍니다.

마무리

이 글에서는 jQuery를 사용하여 테이블의 정렬과 필터링 기능을 구현하는 방법을 알아보았습니다. 테이블은 웹 개발에서 자주 사용되는 요소 중 하나이므로, 이러한 기능을 구현하는 방법을 익히는 것은 매우 유용합니다. jQuery를 사용하면 간단하게 테이블을 조작할 수 있으며, 웹 개발에서 더 다양하고 효과적인 기능을 구현할 수 있습니다.

참고 자료: