3

I did some research on TableView's Filtering and Pagination separately.

Filtering : this post helped me as my need
Pagination : this, this post helped me also

I want to combine them together like so:
TableView Filtering with Pagination

In Details --------------
I tried to make the pagination functionality first and it worked,
secondly, when i would start typing to the TextField filter functionality will match/filter the data from ObservableList, then rearrange the pagination according to the matched data size and show them through the table like the Datatable's search and pagination does and that's what i wanted, but i failed

My Code ...

PersonTableController.java

public class PersonTableController {

    @FXML private TextField filterField;
    @FXML private TableView<Person> personTable;
    @FXML private TableColumn<Person, Integer> slColumn;
    @FXML private TableColumn<Person, String> firstNameColumn;
    @FXML private TableColumn<Person, String> lastNameColumn;
    @FXML private Pagination pagination;
    private ObservableList<Person> masterData = FXCollections.observableArrayList();
    private int dataSize;
    private int rowsPerPage = 4;

    public PersonTableController() {
        masterData.add(new Person(1, "Hans", "Muster"));
        masterData.add(new Person(2, "Ruth", "Mueller"));
        masterData.add(new Person(3, "Heinz", "Kurz"));
        masterData.add(new Person(4, "Cornelia", "Meier"));
        masterData.add(new Person(5, "Cornelia", "Meier"));
        masterData.add(new Person(6, "Werner", "Meyer"));
        masterData.add(new Person(7, "Lydia", "Kunz"));
        masterData.add(new Person(8, "Anna", "Best"));
        masterData.add(new Person(9, "Stefan", "Meier"));
        masterData.add(new Person(10, "Hans", "Muster"));
        masterData.add(new Person(11, "Ruth", "Mueller"));
        masterData.add(new Person(12, "Heinz", "Kurz"));
        masterData.add(new Person(13, "Werner", "Meyer"));
        masterData.add(new Person(14, "Lydia", "Kunz"));
    }

    @FXML
    private void initialize() {

        dataSize = masterData.size();

        pagination.currentPageIndexProperty().addListener(new ChangeListener<Number>() {
            @Override
            public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
                changeTableView(newValue.intValue(), rowsPerPage);
            }

        });

        FilteredList<Person> filteredData = new FilteredList<>(masterData, p -> true);

        filterField.textProperty().addListener((observable, oldValue, newValue) -> {
            filteredData.setPredicate(person -> {
                if (newValue == null || newValue.isEmpty())
                    return true;
                String lowerCaseFilter = newValue.toLowerCase();

                if (person.getFirstName().toLowerCase().indexOf(lowerCaseFilter) != -1) {
                    return true; // Filter matches first name.
                }
                return false; // Does not match.
            });
        });

        SortedList<Person> sortedData = new SortedList<>(filteredData);
        sortedData.comparatorProperty().bind(personTable.comparatorProperty());
        // personTable.setItems(sortedData);

        slColumn.setCellValueFactory(new PropertyValueFactory<Person, Integer>("sl"));
        firstNameColumn.setCellValueFactory(new PropertyValueFactory<Person, String>("firstName"));
        lastNameColumn.setCellValueFactory(new PropertyValueFactory<Person, String>("lastName"));


        int totalPage = (int) (Math.ceil(dataSize * 1.0 / rowsPerPage));
        pagination.setPageCount(totalPage);
        pagination.setCurrentPageIndex(0);
        changeTableView(0, rowsPerPage);

    }

    private void changeTableView(int index, int limit) {

        int fromIndex = index * limit;
        int toIndex = Math.min(fromIndex + limit, dataSize);

        List<Person> subListObs = masterData.subList(fromIndex, toIndex);
        ObservableList<Person> tmpObsToSetTableVal = FXCollections.observableArrayList();

        personTable.getItems().clear();
        personTable.setItems(null);

        for (Person t : subListObs) {
            tmpObsToSetTableVal.add(t);
        }

        personTable.setItems(tmpObsToSetTableVal);

    }

}

Person.java

public class Person {

    private final IntegerProperty sl;
    private final StringProperty firstName;
    private final StringProperty lastName;

    public Person(Integer sl, String firstName, String lastName) {
        this.sl = new SimpleIntegerProperty(sl);
        this.firstName = new SimpleStringProperty(firstName);
        this.lastName = new SimpleStringProperty(lastName);
    }

    public Integer getSl() {
        return sl.get();
    }

    public void setSl(Integer sl) {
        this.sl.set(sl);
    }

    public String getFirstName() {
        return firstName.get();
    }

    public void setFirstName(String firstName) {
        this.firstName.set(firstName);
    }

    public String getLastName() {
        return lastName.get();
    }

    public void setLastName(String lastName) {
        this.lastName.set(lastName);
    }

}

Main.java

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Pagination and Filtering");        
        try {
            FXMLLoader loader = new FXMLLoader(Main.class.getResource("PersonTable.fxml"));
            AnchorPane page = (AnchorPane) loader.load();
            Scene scene = new Scene(page);
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

PersonTable.fxml

<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Pagination?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>

<AnchorPane minWidth="315.0" prefHeight="400.0" prefWidth="500.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="PersonTableController">
  <children>
    <HBox id="HBox" alignment="CENTER" spacing="5.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="10.0">
      <children>
        <Label text="Filter Table:" />
        <TextField fx:id="filterField" prefWidth="-1.0" HBox.hgrow="ALWAYS" />
      </children>
    </HBox>
    <TableView fx:id="personTable" prefHeight="-1.0" prefWidth="-1.0" tableMenuButtonVisible="false" AnchorPane.bottomAnchor="60.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="40.0">
      <columns>
            <TableColumn fx:id="slColumn" maxWidth="5000.0" minWidth="10.0" prefWidth="120.0" text="SL" />
        <TableColumn fx:id="firstNameColumn" maxWidth="5000.0" minWidth="10.0" prefWidth="120.0" text="First Name" />
        <TableColumn fx:id="lastNameColumn" maxWidth="5000.0" minWidth="10.0" prefWidth="120.0" text="Last Name" />
      </columns>
<columnResizePolicy>
<TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
</columnResizePolicy>
    </TableView>
      <HBox AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
         <children>
            <Pagination fx:id="pagination" />
         </children>
      </HBox>
  </children>
</AnchorPane>

any help :) plz

alamin
  • 74
  • 1
  • 3
  • 8

1 Answers1

6

here is my simple solution to your problem:

import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.collections.transformation.FilteredList;
import javafx.collections.transformation.SortedList;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Pagination;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.TextField;

import java.net.URL;
import java.util.ResourceBundle;

public class Controller implements Initializable {

    @FXML
    private TextField filterField;
    @FXML
    private TableView<Person> personTable;
    @FXML
    private TableColumn<Person, Integer> slColumn;
    @FXML
    private TableColumn<Person, String> firstNameColumn;
    @FXML
    private TableColumn<Person, String> lastNameColumn;
    @FXML
    private Pagination pagination;

    private static final int ROWS_PER_PAGE = 4;
    private ObservableList<Person> masterData = FXCollections.observableArrayList();
    private FilteredList<Person> filteredData;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        setupData();
        filteredData = new FilteredList<>(masterData, p -> true);
        filterField.textProperty().addListener((observable, oldValue, newValue) -> {
            filteredData.setPredicate(
                    person -> newValue == null || newValue.isEmpty() || person.getFirstName().toLowerCase()
                            .contains(newValue.toLowerCase()) || person.getLastName().toLowerCase()
                            .contains(newValue.toLowerCase()));
            changeTableView(pagination.getCurrentPageIndex(), ROWS_PER_PAGE);
        });

        slColumn.setCellValueFactory(data -> data.getValue().slProperty().asObject());
        firstNameColumn.setCellValueFactory(data -> data.getValue().firstNameProperty());
        lastNameColumn.setCellValueFactory(data -> data.getValue().lastNameProperty());

        int totalPage = (int) (Math.ceil(masterData.size() * 1.0 / ROWS_PER_PAGE));
        pagination.setPageCount(totalPage);
        pagination.setCurrentPageIndex(0);
        changeTableView(0, ROWS_PER_PAGE);
        pagination.currentPageIndexProperty().addListener(
                (observable, oldValue, newValue) -> changeTableView(newValue.intValue(), ROWS_PER_PAGE));
    }

    public void setupData() {
        masterData.add(new Person(1, "Hans", "Muster"));
        masterData.add(new Person(2, "Ruth", "Mueller"));
        masterData.add(new Person(3, "Heinz", "Kurz"));
        masterData.add(new Person(4, "Cornelia", "Meier"));
        masterData.add(new Person(5, "Cornelia", "Meier"));
        masterData.add(new Person(6, "Werner", "Meyer"));
        masterData.add(new Person(7, "Lydia", "Kunz"));
        masterData.add(new Person(8, "Anna", "Best"));
        masterData.add(new Person(9, "Stefan", "Meier"));
        masterData.add(new Person(10, "Hans", "Muster"));
        masterData.add(new Person(11, "Ruth", "Mueller"));
        masterData.add(new Person(12, "Heinz", "Kurz"));
        masterData.add(new Person(13, "Werner", "Meyer"));
        masterData.add(new Person(14, "Lydia", "Kunz"));
    }

    private void changeTableView(int index, int limit) {

        int fromIndex = index * limit;
        int toIndex = Math.min(fromIndex + limit, masterData.size());

        int minIndex = Math.min(toIndex, filteredData.size());
        SortedList<Person> sortedData = new SortedList<>(
                FXCollections.observableArrayList(filteredData.subList(Math.min(fromIndex, minIndex), minIndex)));
        sortedData.comparatorProperty().bind(personTable.comparatorProperty());

        personTable.setItems(sortedData);

    }

    class Person {

        private final IntegerProperty sl;
        private final StringProperty firstName;
        private final StringProperty lastName;

        public Person(Integer sl, String firstName, String lastName) {
            this.sl = new SimpleIntegerProperty(sl);
            this.firstName = new SimpleStringProperty(firstName);
            this.lastName = new SimpleStringProperty(lastName);
        }

        public int getSl() {
            return sl.get();
        }

        public IntegerProperty slProperty() {
            return sl;
        }

        public String getFirstName() {
            return firstName.get();
        }

        public StringProperty firstNameProperty() {
            return firstName;
        }

        public String getLastName() {
            return lastName.get();
        }

        public StringProperty lastNameProperty() {
            return lastName;
        }
    }
}

The table filtering begins on the first page, and if it "overflows" then on the second and so on. This is the expected result?

P.S. I refactored/simplified a little bit the code, like replace the inner classes with lambdas and removed a few unnecessary element + extended the filtering to last name, to get a larger amount of filter possibility, but you can use them as you want.

Sunflame
  • 2,993
  • 4
  • 24
  • 48
  • 1
    Thanks to your effort. it's almost done!! i wanted to rearrange the pagination based on the filters value but your code works fine anyway. I just added this `pagination.setPageCount((int) (Math.ceil(filteredData.size() * 1.0 / ROWS_PER_PAGE)));` line after the `.setPredicate` now it's done – alamin Feb 27 '18 at 10:46
  • Yeah, it makes sense, I forgot it. – Sunflame Feb 27 '18 at 10:51
  • 1 Question just for @Sunflame:: am i not much informative in my question(for self-correction)??? by the-way Thanks... – alamin Feb 27 '18 at 10:55
  • I understood what you want to do/achieve, I was just asking if this is the expected result because I forgot that you mentioned in the first comment, and I thought what if you go to the fourth page and filter the table, and the data disappears even if the text matches in the table. But now it makes more sense to reduce the number of pages to have only as much as needed. – Sunflame Feb 27 '18 at 10:58
  • I don't really know why did you get -2 on this question since, it took a little effort to get the right answer, for me too. Probably I didn't see the original question, and you didn't ask as clear as it is now, or the code was missing. Besides the effort I think it can be used in many places. – Sunflame Feb 27 '18 at 11:03
  • I had the similar problem and solved with the help of this. – gsmaker Mar 11 '20 at 05:15