JavaFX UI 控件之 Pagination（javafx漂亮界面）

Pagination类属于javafx.scene.control包，是常用的分页控件，经常与表格控件TableView结合使用。本文重点介绍TableView 与 Pagination如何结合使用。先看效果图如下：

接下来我们按照步骤来实现：

准备数据

先定义一个Student类，用来承载数据。

public class Student {
    private StringProperty name = new SimpleStringProperty();//姓名
    private StringProperty sex = new SimpleStringProperty();//性别
    private StringProperty age = new SimpleStringProperty();//年龄
    private StringProperty code = new SimpleStringProperty();//学号
    private StringProperty email = new SimpleStringProperty();//电子邮箱

    public Student(String name,String sex, String age,String code,String email) {
        setName(name);
        setSex(sex);
        setAge(age);
        setCode(code);
        setEmail(email);
    }
//省略 get 和 set 方法
}

创建一个DataUtil类，用来模拟提供分页数据，这里简单处理，分为奇数页码和偶数页码分别提供不同的数据，代码如下：

import java.util.Random;

public class DataUtil {
    static int BOUND =1000;
/**
  pageNo :页码
*/
    public static ObservableList<Student> getPageData(int pageNo){
        if(pageNo%2==0){
           return FXCollections.observableArrayList(
                    new Student("李**", "男","13岁",String.valueOf((new Random()).nextInt(BOUND)),(new Random()).nextInt(BOUND)+"@163.com"),
                    new Student("陈**", "女","13岁",String.valueOf((new Random()).nextInt(BOUND)),(new Random()).nextInt(BOUND)+"@163.com"),
                    new Student("罗**", "男","13岁",String.valueOf((new Random()).nextInt(BOUND)),(new Random()).nextInt(BOUND)+"@163.com"),
                    new Student("黄**", "男","13岁",String.valueOf((new Random()).nextInt(BOUND)),(new Random()).nextInt(BOUND)+"@163.com"),
                    new Student("欧**", "男","13岁",String.valueOf((new Random()).nextInt(BOUND)),(new Random()).nextInt(BOUND)+"@163.com"),
                    new Student("立**", "女","13岁",String.valueOf((new Random()).nextInt(BOUND)),(new Random()).nextInt(BOUND)+"@163.com"),
                    new Student("秀**", "男","13岁",String.valueOf((new Random()).nextInt(BOUND)),(new Random()).nextInt(BOUND)+"@163.com"),
                    new Student("胡**", "男","13岁",String.valueOf((new Random()).nextInt(BOUND)),(new Random()).nextInt(BOUND)+"@163.com"),
                    new Student("王**", "女","13岁",String.valueOf((new Random()).nextInt(BOUND)),(new Random()).nextInt(BOUND)+"@163.com"),
                    new Student("正**", "男","13岁",String.valueOf((new Random()).nextInt(BOUND)),(new Random()).nextInt(BOUND)+"@163.com")
            );
        }else{
            return FXCollections.observableArrayList(
                    new Student("阿**", "男","13岁",String.valueOf((new Random()).nextInt(BOUND)),(new Random()).nextInt(BOUND)+"@aliyun.com"),
                    new Student("政**", "女","13岁",String.valueOf((new Random()).nextInt(BOUND)),(new Random()).nextInt(BOUND)+"@aliyun.com"),
                    new Student("风**", "男","13岁",String.valueOf((new Random()).nextInt(BOUND)),(new Random()).nextInt(BOUND)+"@aliyun.com"),
                    new Student("于**", "女","13岁",String.valueOf((new Random()).nextInt(BOUND)),(new Random()).nextInt(BOUND)+"@aliyun.com"),
                    new Student("秦**", "男","13岁",String.valueOf((new Random()).nextInt(BOUND)),(new Random()).nextInt(BOUND)+"@aliyun.com"),
                    new Student("国**", "女","13岁",String.valueOf((new Random()).nextInt(BOUND)),(new Random()).nextInt(BOUND)+"@aliyun.com"),
                    new Student("至**", "男","13岁",String.valueOf((new Random()).nextInt(BOUND)),(new Random()).nextInt(BOUND)+"@aliyun.com"),
                    new Student("薛**", "女","13岁",String.valueOf((new Random()).nextInt(BOUND)),(new Random()).nextInt(BOUND)+"@aliyun.com"),
                    new Student("龙**", "男","13岁",String.valueOf((new Random()).nextInt(BOUND)),(new Random()).nextInt(BOUND)+"@aliyun.com"),
                    new Student("冯**", "女","13岁",String.valueOf((new Random()).nextInt(BOUND)),(new Random()).nextInt(BOUND)+"@aliyun.com")
                    );
        }
    }
}

初始化分页控件

这里只需要创建一个Pagination实例，设置相关参数即可。重点是要实现PageFactory，也就是每一页数据和UI控件是什么，这里UI控件就是TableView。

        VBox root = new VBox();
        // 分页控件
        Pagination pagination = new Pagination();
        pagination.setPageFactory(pageIndex -> {
            ObservableList<Student> dataList = DataUtil.getPageData(pageIndex);
            return createPageTable(dataList);
        });
        pagination.setPageCount(20);//总页数
        pagination.setMaxPageIndicatorCount(10);//分页控件显示的最大页数，小于10页就显示实际页数
        pagination.setCurrentPageIndex(0);//当前页码索引，从0开始
        root.getChildren().addAll(pagination);

PageFactory实现：

 /**
     * 创建每页表格和数据
     * @param dataList
     * @return
     */
    private TableView<Student> createPageTable(ObservableList<Student> dataList){
        TableView<Student> tableView = new TableView();
        TableColumn<Student, String> nameColumn = new TableColumn<>("姓名");
        nameColumn.setCellValueFactory(cellData -> cellData.getValue().nameProperty());
        nameColumn.prefWidthProperty().bind(tableView.widthProperty().multiply(0.2));

        tableView.getColumns().add(nameColumn);

        TableColumn<Student, String> sexColumn = new TableColumn<>("性别");
        sexColumn.setCellValueFactory(cellData -> cellData.getValue().sexProperty());
        sexColumn.prefWidthProperty().bind(tableView.widthProperty().multiply(0.1));
        tableView.getColumns().add(sexColumn);

        TableColumn<Student, String> ageColumn = new TableColumn<>("年龄");
        ageColumn.setCellValueFactory(cellData -> cellData.getValue().ageProperty());
        ageColumn.prefWidthProperty().bind(tableView.widthProperty().multiply(0.1));
        tableView.getColumns().add(ageColumn);

        TableColumn<Student, String> codeColumn = new TableColumn<>("学号");
        codeColumn.setCellValueFactory(cellData -> cellData.getValue().codeProperty());
        codeColumn.prefWidthProperty().bind(tableView.widthProperty().multiply(0.1));
        tableView.getColumns().add(codeColumn);

        TableColumn<Student, String> emailColumn = new TableColumn<>("电子邮箱");
        emailColumn.setCellValueFactory(cellData -> cellData.getValue().emailProperty());
        emailColumn.prefWidthProperty().bind(tableView.widthProperty().multiply(0.5));
        tableView.getColumns().add(emailColumn);
        tableView.setItems(dataList);
        return tableView;
    }

这里需要注意的是：每次点分页都是创建一个新的TableView，如果使用预先定义的TableView，就会导致分页控件Pagination遮住表格TableView。当然如果不想有 Pagination分页动画效果，页可以使用预先定义的TableView，但是 PageFactory必须返回一个Node（可以是任何UI控件，只要不显示就行），这样分页时Pagination不会遮住表格TableView，代码示例如下：

       VBox root = new VBox();

        TableView tableView = createPageTable(DataUtil.getPageData(1));
        // 分页控件
        Pagination pagination = new Pagination();
        pagination.setPageFactory(pageIndex -> {
            ObservableList<Student> dataList = DataUtil.getPageData(pageIndex);
            tableView.setItems(dataList);
          /**
            此处不能返回null，必须返回一个Node类型的控件，容器类型的即可，不要有内容。
            但是切换页码时不会有动画。
          **/
            return new HBox();
        });
        pagination.setPageCount(20);//总页数
        pagination.setMaxPageIndicatorCount(10);//分页控件显示的最大页数，小于10页就显示实际页数
        pagination.setCurrentPageIndex(0);//当前页码索引，从0开始
        root.getChildren().addAll(tableView,pagination);


        Scene scene = new Scene(root, 800, 400);
        primaryStage.setScene(scene);
        primaryStage.show();

完整程序

import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.Pagination;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;


public class PaginationDemo extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {

        VBox root = new VBox();
        // 分页控件
        Pagination pagination = new Pagination();
        pagination.setPageFactory(pageIndex -> {
            ObservableList<Student> dataList = DataUtil.getPageData(pageIndex);
            return createPageTable(dataList);
        });
        pagination.setPageCount(20);//总页数
        pagination.setMaxPageIndicatorCount(10);//分页控件显示的最大页数，小于10页就显示实际页数
        pagination.setCurrentPageIndex(0);//当前页码索引，从0开始
        root.getChildren().addAll(pagination);


        Scene scene = new Scene(root, 800, 400);
        primaryStage.setScene(scene);
        primaryStage.show();

    }

    /**
     * 创建每一页表格和数据
     * @param dataList
     * @return
     */
    private TableView<Student> createPageTable(ObservableList<Student> dataList){
        TableView<Student> tableView = new TableView();
        TableColumn<Student, String> nameColumn = new TableColumn<>("姓名");
        nameColumn.setCellValueFactory(cellData -> cellData.getValue().nameProperty());
        nameColumn.prefWidthProperty().bind(tableView.widthProperty().multiply(0.2));

        tableView.getColumns().add(nameColumn);

        TableColumn<Student, String> sexColumn = new TableColumn<>("性别");
        sexColumn.setCellValueFactory(cellData -> cellData.getValue().sexProperty());
        sexColumn.prefWidthProperty().bind(tableView.widthProperty().multiply(0.1));
        tableView.getColumns().add(sexColumn);

        TableColumn<Student, String> ageColumn = new TableColumn<>("年龄");
        ageColumn.setCellValueFactory(cellData -> cellData.getValue().ageProperty());
        ageColumn.prefWidthProperty().bind(tableView.widthProperty().multiply(0.1));
        tableView.getColumns().add(ageColumn);

        TableColumn<Student, String> codeColumn = new TableColumn<>("学号");
        codeColumn.setCellValueFactory(cellData -> cellData.getValue().codeProperty());
        codeColumn.prefWidthProperty().bind(tableView.widthProperty().multiply(0.1));
        tableView.getColumns().add(codeColumn);

        TableColumn<Student, String> emailColumn = new TableColumn<>("电子邮箱");
        emailColumn.setCellValueFactory(cellData -> cellData.getValue().emailProperty());
        emailColumn.prefWidthProperty().bind(tableView.widthProperty().multiply(0.5));
        tableView.getColumns().add(emailColumn);
        tableView.setItems(dataList);
        return tableView;
    }
}

运行效果