SMART datagrid v.1 > Examples

Back  Forward

Paging  Example

SMART datagrid网格]的分页,替代连接在网格上的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
分页数据
分页偏移
分页行