이번에는 TableSorter로 만든 테이블의 데이터를 랜덤하게 섞어보려 합니다.

TableSorter는 jQuery 플러그인으로, 테이블을 정렬하고 필터링하는 기능을 제공합니다. 이를 사용하여 테이블에서 랜덤한 순서로 데이터를 표시하는 방법을 살펴보겠습니다.

TableSorter 설정

우선 TableSorter를 테이블에 적용하고 초기화하는 방법에 대해 알아보겠습니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.0.5/js/jquery.tablesorter.min.js"></script>
<script>
  $(document).ready(function(){
    $("#myTable").tablesorter();
  });
</script>

위 코드는 jQuery와 TableSorter를 포함하고, 테이블에 TableSorter를 적용하는 간단한 예제입니다.

데이터 랜덤하게 섞기

랜덤한 순서로 데이터를 표시하려면 TableSorter의 sortList 옵션을 사용합니다.

$(document).ready(function(){
  $("#myTable").tablesorter({
    sortList: [[0,0]],
    initialized: function(table) {
      var rows = table.tBodies[0].rows;
      for (var i = 1; i < rows.length; i++) {
        var targetIndex = Math.floor(Math.random() * (i + 1));
        var targetRow = rows[i];
        var currentRow = rows[targetIndex];
        targetRow.parentNode.insertBefore(targetRow, currentRow);
      }
      table.refreshWidgets(true, true);
    }
  });
});

위 코드는 TableSorter의 initialized 이벤트를 사용하여 테이블의 데이터를 랜덤하게 섞는 방법을 보여줍니다.

이제 테이블을 새로고침하면 데이터가 랜덤한 순서로 표시될 것입니다.

이렇게 TableSorter를 사용하여 테이블의 데이터를 랜덤하게 섞는 방법에 대해 알아보았습니다. TableSorter를 사용하면 원하는 대로 테이블을 정렬하고 보다 유연하게 표시할 수 있습니다.

더 자세한 내용은 TableSorter 공식 문서를 참고하시기 바랍니다.