jQWidgets jqxGrid pageable 属性

jQWidgets是一个基于jQuery的UI工具集，包括多种自定义控件，如表格（Grid），图表（Chart），按钮（Button）等等。其中，jqxGrid是一个用于数据显示的表格控件，可以支持分页、排序、筛选以及编辑等功能。

pageable属性介绍

pageable属性用于控制表格是否分页显示。默认值为false，即不分页。当设置为true时，会在表格底部自动添加一个分页栏。用于用户翻页操作。

可选参数

pageSize：设置每页显示的行数，默认值为10。

pageSizeOptions：设置每页行数的可选值，用于用户下拉选择，默认值为[5, 10, 20]。

rows：表格数据的总行数，当pageable为true时必填项。

currentPage：当前页码，当pageable为true时必填项。

使用示例

<script type="text/javascript">
    $(document).ready(function () {
        var data = [
            { Name: "Bob", Age: 30 },
            { Name: "Alice", Age: 25 },
            { Name: "Tom", Age: 40 },
            { Name: "Jerry", Age: 34 }
        ];
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'Name', type: 'string' },
                { name: 'Age', type: 'number' }
            ]
        };
        var dataAdapter = new $.jqx.dataAdapter(source);
        $("#jqxgrid").jqxGrid(
        {
            pageable: true, //启用分页
            pageSize: 2, //每页显示2行数据
            pageSizeOptions: ['5', '10', '20'], //设置可选的每页行数
            source: dataAdapter,
            columns: [
                { text: 'Name', datafield: 'Name' },
                { text: 'Age', datafield: 'Age' }
            ]
        });
    });
</script>

返回值

当将pageable属性设置为true时，会在表格底部生成一个分页栏，用于用户翻页操作。用户选择不同的页码或改变每页显示行数时，表格会自动刷新显示对应的数据。

![分页栏示例图](/jqxgrid-pageable.png)