Flutter数据表分页插件yjy_dc_datatable_paginator的使用

ScreenShot

Usage

1. 在 pubspec.yaml 中添加依赖

在您的项目的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  dc_datatable_paginator: ^版本号

2. 导入包

在需要使用的 Dart 文件中导入插件：

import 'package:dc_datatable_paginator/dc_datatable_paginator.dart';

3. 创建模型类

定义一个数据模型类，用于存储表格中的每一行数据。例如：

class ModelExample {
  final int id;
  final String name;
  final String description;
  ModelExample({
    required this.id,
    required this.name,
    required this.description,
  });

  [@override](/user/override)
  bool operator ==(Object other) {
    if (identical(this, other)) return true;

    return other is ModelExample &&
        other.id == id &&
        other.name == name &&
        other.description == description;
  }

  [@override](/user/override)
  int get hashCode => id.hashCode ^ name.hashCode ^ description.hashCode;
}

4. 创建数据表控制器

创建一个继承自 DcDataTableController 的类，并实现必要的方法：

class MyDataTableController extends DcDataTableController {
  MyDataTableController(super.context);

  [@override](/user/override)
  Future<void> onLoadData() async {
    // 模拟从 API 获取数据
    debugPrint("fetch data from api...");
    loadding = true;
    Future.delayed(
      const Duration(seconds: 2),
      () {
        List<ModelExample> dataList = List.generate(pageSize, (i) {
          i++;
          return ModelExample(
              id: i + (currentPage * 10),
              name: "Name ${i + (currentPage * 10)}",
              description:
                  "Description: Record:${i + (currentPage * 10)}  Page: ${currentPage + 1}  search: $searchValue");
        });

        // 设置从 API 获取的数据
        data = dataList;
        // 模拟总记录数
        totalRecords = 110;
        // 关闭加载对话框
        loadding = false;
      },
    );
  }

  [@override](/user/override)
  DataRow getRow(int rowIndex) {
    ModelExample model = data[rowIndex];
    return DataRow(
        cells: [
          DataCell(Text(model.id.toString())),
          DataCell(Text(model.name)),
          DataCell(Text(model.description)),
        ],
        selected: dataSelected.contains(model),
        onSelectChanged: (value) {
          if (dataSelected.contains(model)) {
            dataSelected.remove(model);
          } else {
            dataSelected.add(model);
          }
          onLoadData();
        });
  }
}

5. 创建屏幕并使用数据表

在屏幕中使用 DcDataTable 并绑定控制器：

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({Key? key, required this.title}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    DcDataTableController controller = MyDataTableController(context);

    controller.sortColumnIndex = 1;
    controller.limitPages = 10;
    controller.pageSize = 7;

    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            /// 数据表定义
            DcDataTable(
              controller: controller,
              labelPage: 'Page',
              labelRecords: 'Records',
              labelNoRecords: 'No Records',
              showCheckboxColumn: false,
              showInputSearch: true,
              textInputActionSearch: TextInputAction.search,
              columns: [
                DataColumn(
                    label: const Text('Id'),
                    onSort: (columnIndex, ascending) {
                      onSortColumn(controller, columnIndex, ascending);
                    }),
                DataColumn(
                    label: const Text('Name'),
                    onSort: (columnIndex, ascending) {
                      onSortColumn(controller, columnIndex, ascending);
                    }),
                DataColumn(
                    label: const Text('Description'),
                    onSort: (columnIndex, ascending) {
                      onSortColumn(controller, columnIndex, ascending);
                    }),
              ],
            ),
          ],
        ),
      ),
    );

    // 模拟搜索功能
  }

  void onSortColumn(
      DcDataTableController controller, int columnIndex, bool ascending) {
    List<ModelExample> list = List<ModelExample>.from(controller.data);

    if (columnIndex == 0) {
      list.sort((m1, m2) =>
          DcDataTableController.compareString(ascending, m1.id.toString(), m2.id.toString()));
    } else if (columnIndex == 1) {
      list.sort((m1, m2) =>
          DcDataTableController.compareString(ascending, m1.name, m2.name));
    } else if (columnIndex == 2) {
      list.sort((m1, m2) =>
          DcDataTableController.compareString(ascending, m1.description, m2.description));
    }

    controller.data = list;
    controller.sortAscending = ascending;
    controller.sortColumnIndex = columnIndex;
  }
}