[js][datatables] Scroller 플러그인

DataTables의 Scroller 플러그인은 대량의 데이터를 처리할 때 성능을 향상시키기 위해 사용되는

가상 스크롤(Virtual Scrolling) 기능입니다.

즉, 수천~수만 건의 데이터가 있어도 브라우저에 실제로 렌더링되는 행의 수를 제한하여 빠르게 스크롤할 수 있게 해줍니다.

 

🔍 Scroller 플러그인 핵심 특징

항목	설명
목적	수천~수만 건의 대용량 데이터를 효율적으로 렌더링
렌더링 방식	화면에 보이는 영역만 실제 DOM에 표시 (Virtual rendering)
스크롤 바 생성	scrollY 높이를 기준으로 세로 스크롤 생성
성능 향상	전체 데이터를 클라이언트에 불러오더라도 실제 렌더링은 필요한 부분만 처리

 

✅ 사용 방법

1. HTML

html

복사편집

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>번호</th>
      <th>이름</th>
      <th>직책</th>
    </tr>
  </thead>
</table>

 

---

2. JavaScript

javascript

$('#example').DataTable({
  ajax: '/your/data/url', // 대량 데이터가 있는 Ajax 소스
  deferRender: true,
  scrollY: 400,            // 테이블 높이 (px, %, vh 가능)
  scroller: true
});

⚠️ scrollY는 필수입니다. Scroller는 이 값을 기반으로 동작합니다.

---

3. 필요한 CDN 추가 (없을 경우)

html

<!-- DataTables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<!-- Scroller 플러그인 -->
<link rel="stylesheet" href="https://cdn.datatables.net/scroller/2.2.0/css/scroller.dataTables.min.css">
<script src="https://cdn.datatables.net/scroller/2.2.0/js/dataTables.scroller.min.js"></script>

---

📌 Scroller와 관련된 주요 옵션

옵션	설명
scrollY	세로 스크롤 높이 지정 (필수)
scroller	true로 설정하면 가상 스크롤 활성화
deferRender	렌더링 성능 향상을 위한 옵션 (true 권장)
ajax	Ajax로 데이터 불러올 경우 필수

 

---

🎯 사용 시 주의사항

1. 서버 사이드 처리와 함께 사용하려면 serverSide: true도 함께 설정
2. scrollCollapse: true로 설정하면 테이블 높이 자동 조절 가능
3. Scroller는 display: block 테이블 구조에서 제대로 작동
4. 스크롤이 느리게 작동한다면 rowHeight 수동 설정 고려

 

예시 스크린샷 없이 설명된 구조

+--------------------------------------+
|             scrollY 400px            |
|  +-------------------------------+   |
|  | visible rows only             |   | ← 렌더링
|  | (e.g., 10 rows)               |   |
|  +-------------------------------+   |
|  | (rest of 10,000 rows skipped)    |
+--------------------------------------+