SMART datagrid v1.4 > Examples
SMART datagrid에서 Paging은 그리드에 연결된 DataSet의 전체 행 대신 특정 위치로 부터 특정 개수의 행들을 표시하는 방식으로 구현된다.
이번 예제에서는 가장 단순한 방식으로 페이징을 구현한다. 데이터를 로드한 후 GridView.setPaging 메소드로 페이지의 크기를 지정하면 내부적으로 전체 페이지 수가 결정되고 그리드에는 지정한 행 수만큼만 표시된다.
var count = parseInt($('#edtPageCount').val());
grdMain.setPaging(true, 10, isNaN(count) ? -1 : count);
페이징 상태가 변경되면 즉, 새로 페이징을 시작하거나 페이징이 취소되면, onPaged 이벤트가 발생한다.
grdMain.onPaged = function (grid, paged) {
$('#pagePanel').toggle(paged);
};
이 후에는 GridView.pageIndex 속성으로 페이지 간을 이동할 수 있다. 페이지 변경 전에는 onPageIndexChanging 이벤트가, 변경 후에는 onPageIndexChanged 이벤트가 발생한다. 변경 전 이벤트 핸들러에서 명시적으로 false를 리턴하면 이동하지 않는다.
Page Size: Page Count:
페이지 변경 후 이벤트에서는 페이지 이동 버튼들의 활성 상태 등을 변경해서 사용자에게 페이지 위치를 알릴 수 있다.
grdMain.onPageIndexChanged = function (grid, newPage, oldPage) {
var count = grdMain.pageCount();
$('#btnFirst').prop('disabled', newPage <= 0);
$('#btnPrev').prop('disabled', newPage <= 0);
$('#btnNext').prop('disabled', newPage >= count - 1);
$('#btnLast').prop('disabled', newPage >= count - 1);
};
페이지 크기가 변경되면 GridView.onPageCountChanged 이벤트가 발생한다.