SMART datagrid v1.4 > Examples

Back  Forward

Paging  Example

SMART datagrid에서 Paging은 그리드에 연결된 DataSet의 전체 행 대신 특정 위치로 부터 특정 개수의 행들을 표시하는 방식으로 구현된다. 

이번 예제에서는 가장 단순한 방식으로 페이징을 구현한다. 데이터를 로드한 후 GridView.setPaging 메소드로 페이지의 크기를 지정하면 내부적으로 전체 페이지 수가 결정되고 그리드에는 지정한 행 수만큼만 표시된다. 

Code -1
    var count = parseInt($('#edtPageCount').val());
    grdMain.setPaging(true, 10, isNaN(count) ? -1 : count);

페이징 상태가 변경되면 즉, 새로 페이징을 시작하거나 페이징이 취소되면, onPaged 이벤트가 발생한다. 

Code -2
    grdMain.onPaged = function (grid, paged) {
        $('#pagePanel').toggle(paged);  
    };

이 후에는 GridView.pageIndex 속성으로 페이지 간을 이동할 수 있다. 페이지 변경 전에는 onPageIndexChanging 이벤트가, 변경 후에는 onPageIndexChanged 이벤트가 발생한다. 변경 전 이벤트 핸들러에서 명시적으로 false를 리턴하면 이동하지 않는다. 

Page Size:  Page Count:   

Grid - 1
rows

페이지 변경 후 이벤트에서는 페이지 이동 버튼들의 활성 상태 등을 변경해서 사용자에게 페이지 위치를 알릴 수 있다. 

Code -3
    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 이벤트가 발생한다. 

소스보기 JSP 

See Also
페이징 개요
GridView.setPaging
GridView.pageIndex
GridView.pageCount
GridView.onPaged
GridView.onPageCountChanged
GridView.onPageIndexChanging
GridView.onPageIndexChanged
Examples
페이지 데이터 로딩
페이지 행 위치 지정
페이지에 특정 행들 표시