第六十七回：PaginatedDataTable Widget

我们在上一章回中介绍了DataTable选择功能相关的内容，本章回中将介绍 PaginatedDataTable Widget.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里介绍的PaginatedDataTable是在DataTable的基础上添加了分页功能，它会在数据表的下面显示页序号，点击序号可能跳转到其它页，对于数据量比较大的表格可以通过多个页来显示数据。它的整体用法和DataTable类似，本章回中将详细介绍它的使用方法。

使用方法

和其它组件类似PaginatedDataTable组件提供了相关的属性来控制自己，下面是常用的属性：

• columns属性：主要用来控制表格的列，类型是List<DataColumn>
• sortColumnIndex属性：主要用来指出使用哪一列的数据进行排序；
• sortAscending属性：主要用来控制使用升序还是降序进行排序，默认值是true,表示升序；
• header属性：主要用来在表格头部显示数据表相关的标题等信息；
• source属性：主要用来控制表格的行，它类似DataTable组件中的rows属性；
• rowsPerPage属性：主要用来控制每页显示的数据行数,默认值为10;
• arrowHeadColor属性：主要用来控制分页时上下页切换的按钮颜色；
• onPageChanged属性：该属性是方法类型，切换分页时回调此方法；

上面介绍的这些属性中前三个属性的功能和DataTable组件中同名属性的功能相同，其它属性的功能可以看上面的介绍。

这些属性中我们重点介绍一下source属性，该属性的类型必须是DataTableSource抽象类的子类,因此，我们需要自定义一个DataTableSource类的子类，数据表中的数据通过该类进行存储和管理。

示例代码

PaginatedDataTable(
  //表格标题，在最上方显示
  header: Text("PaginatedDataTable"),
  sortColumnIndex: _sortIndex,
  sortAscending: _isSortAscending,
  //修改分页时上下页切换的按钮颜色，不过无法修改按钮的形状，默认是左右方向的箭头
  arrowHeadColor: Colors.purpleAccent,
  //每页显示的数据行数,默认值为10
  rowsPerPage: 2,
  //换页时回调此方法,参数为页的索引值，从0开始
  onPageChanged: (value) {
    debugPrint('page: $value');
  },
  //表格的列名
  columns: [
    DataColumn(
      label: Text("Name"),
    ), //点击排序图标时调用
    // 在该方法中实现排序功能，一方面是动态调整排序方式，另外一方面是实现核心排序功能
    DataColumn(
      label: Text("Age"),
    ),
    //第三列启用排序功能
    DataColumn(
      label: Text("Class"),
      onSort: (index, ascend) {
        //这里的排序方法只调整了排序的方式，没有实现核心排序功能
        setState(() {
          _sortIndex = index;
          //可以动态调整排序的方式,不过没有实现排序功能
          _isSortAscending = ascend;
        });
      },
    ),
  ],
  //存放表格中的数据
  source: customDataSource,
),

上面的代码只是核心代码，完整的代码可以参考Github上ex_030文件中的代码。代码中的customDataSource变量是自定义数据类型的对象，它的类型定义比较简单，主要是实现了抽象类的相关方法。这里不列出该类的代码，感兴趣的看官可以到ex_030文件中查看完整的代码。

本文只介绍了PaginatedDataTable的基本用法，它的数据排序功能与DataTable类似，我们就不详细介绍了。该控件一般用于网页中处理大量的数据，移动端使用的情况比较少，因此大家只需要了解它的基本用法就可以，如果项目中确实需要使用该组件，那么到时候再去深入理解它的用法也来的及。

看官们，关于PaginatedDataTable Widget相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!