[javascript] TableSorter를 이용한 테이블의 데이터를 CSV 형식으로 변환하기

18 Dec 2023

javascript

TableSorter는 웹 애플리케이션의 테이블 정렬 및 필터링과 같은 데이터 조작을 간편하게 하는 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하여 테이블의 데이터를 CSV 형식으로 변환하는 방법을 알아보겠습니다.

TableSorter 초기 설정

TableSorter를 테이블에 적용한 후, Export 라이브러리를 사용하여 테이블의 데이터를 CSV로 변환할 수 있습니다. 먼저, 테이블을 TableSorter에 적용하고 Export 라이브러리를 추가합니다.

$(function(){
  $("table").tablesorter();
  $("table").tablesorterPager({container: $("#pager")});
  $("table").tablesorter().tablesorterPager({container: $("#pager")});
  $(".download").click(function(){
    $("table").table2CSV();
  });
});

위 예제에서는 테이블을 TableSorter로 실행하고, CSV로 데이터를 내보내기 위해 ‘download’ 클래스가 적용된 버튼을 클릭하면 테이블의 데이터가 CSV 형식으로 내보내지도록 설정했습니다.

TableSorter Export 라이브러리 설정

TableSorter Export 프로세스를 시작하려면 필요한 파일을 추가해야 합니다. 이때 PapaParse 라이브러리를 추가하여 CSV로 변환된 데이터를 다룹니다.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
<script type="text/javascript" src="https://mottie.github.io/tablesorter/dist/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="https://mottie.github.io/tablesorter/dist/js/jquery.tablesorter.widgets.min.js"></script>
<script type="text/javascript" src="../jquery.tablesorter.parsers.js"></script>
<script type="text/javascript" src="../jquery.tablesorter.widgets-filter-formatter.js"></script>
<script type="text/javascript" src="../jquery.tablesorter.pager.js"></script>
<script type="text/javascript" src="../jquery.tablesorter.widgets.js"></script>
<script type="text/javascript" src="../jquery.tablesorter.widgets-pager.js"></script>
<script type="text/javascript" src="../jquery.tablesorter.widgets-export.js"></script>

TableSorter CSV 내보내기

이제 CSV로 데이터를 내보내기 위해 ‘download’ 클래스가 적용된 버튼을 클릭하면 테이블의 데이터가 CSV 형식으로 내보내지도록 설정되었습니다. 해당 버튼을 클릭하면 테이블의 데이터가 CSV 형식으로 내보내집니다.

이와 같이, TableSorter를 활용하여 테이블의 데이터를 쉽게 CSV 형식으로 변환할 수 있습니다.

참고 자료

위의 예시 코드 및 자료는 TableSorter 및 PapaParse 공식 문서를 참고하여 작성되었음을 알려드립니다.