[javascript] SlickGrid의 페이징 기능

01 Dec 2023

javascript

SlickGrid은 JavaScript로 구현된 강력한 그리드 라이브러리입니다. 이 라이브러리는 대용량의 데이터를 효율적으로 표시하고 상호작용할 수 있는 기능을 제공합니다. 이번 글에서는 SlickGrid의 페이징 기능에 대해 알아보겠습니다.

1. 페이징 개요

페이징은 그리드의 데이터를 여러 페이지로 분할하여 보여주는 기능입니다. 사용자는 페이지를 전환해서 계속해서 데이터를 탐색할 수 있으며, 대용량의 데이터를 효율적으로 관리할 수 있습니다.

SlickGrid에서는 페이징을 구현하기 위해 Pager 컴포넌트를 제공합니다. Pager 컴포넌트는 그리드의 하단에 페이지 번호와 이전/다음 버튼 등을 포함한 UI 요소를 생성해줍니다.

Pager 컴포넌트를 사용하려면 먼저 SlickGrid을 초기화하고 그리드의 옵션에 pager 속성을 추가해야 합니다. pager 속성에는 Pager 컴포넌트의 인스턴스가 할당되어야 합니다.

var options = {
  enableCellNavigation: true,
  enableColumnReorder: false,
  ...
  pager: new Slick.Controls.Pager(dataView, grid, $("#pager")),
  ...
};

var grid = new Slick.Grid("#myGrid", dataView, columns, options);

Pager 컴포넌트의 인스턴스를 생성할 때는 3개의 인자를 전달해야 합니다. 첫 번째 인자는 SlickGrid의 DataView 인스턴스여야 하며, 두 번째 인자는 그리드 인스턴스이고, 세 번째 인자는 Pager 컴포넌트가 표시될 DOM 요소를 지정해야합니다.

3. 페이징 이벤트 처리하기

Pager 컴포넌트는 페이지 변경 이벤트에 대한 이벤트 핸들러를 제공합니다. 페이지를 변경할 때마다 dataView의 속성을 업데이트하고 그리드를 다시 렌더링할 수 있습니다.

dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) {
  var pageNum = pagingInfo.pageNum;
  var pageSize = pagingInfo.pageSize;
  var totalRows = pagingInfo.totalRows;
  
  // 현재 페이지 정보를 출력하거나 필요한 작업을 수행합니다.
  
  dataView.setPagingOptions({ pageNum: pageNum, pageSize: pageSize });
  grid.invalidate();
  grid.render();
});

onPagingInfoChanged 이벤트 핸들러는 페이지 변경 시 마다 호출됩니다. 여기서는 페이지 번호, 페이지 크기, 전체 데이터 개수를 확인하고 필요한 작업을 수행하는 예시 코드입니다. dataView의 setPagingOptions 메서드로 페이지 정보를 업데이트하고, 그리드를 다시 렌더링합니다.

4. 추가 설정 옵션

Pager 컴포넌트를 사용할 때 몇 가지 추가적인 설정 옵션을 제공합니다. 몇 가지 예시는 다음과 같습니다.

totalPages: 총 페이지 수를 제한할 수 있습니다.
pageSize: 한 페이지에 표시될 데이터 개수를 설정할 수 있습니다.
showFirstLast: 처음과 마지막 페이지 버튼을 표시할지 여부를 설정할 수 있습니다.

var options = {
  enableCellNavigation: true,
  enableColumnReorder: false,
  ...
  pager: new Slick.Controls.Pager(dataView, grid, $("#pager"), {
    totalPages: 5,
    pageSize: 10,
    showFirstLast: true
  }),
  ...
};

var grid = new Slick.Grid("#myGrid", dataView, columns, options);

이렇게 추가 설정 옵션을 사용하여 Pager 컴포넌트를 보다 다양한 방식으로 제어할 수 있습니다.

마무리

SlickGrid의 페이징 기능을 사용하면 대용량의 데이터를 보다 효율적으로 관리할 수 있습니다. Pager 컴포넌트를 사용하여 페이지 이동과 관련된 UI 요소를 쉽게 구현할 수 있으며, 페이지 변경 이벤트를 활용하여 데이터를 업데이트할 수 있습니다. 다양한 옵션을 설정하여 원하는 기능을 구현해 보세요.

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

1. 페이징 개요

2. Pager 컴포넌트 사용하기

3. 페이징 이벤트 처리하기

4. 추가 설정 옵션

마무리