Hello geeks, I think most of you have already knew that JavaFX 2.2 contains the “Pagination” which is really awesome although it is not pretty hard to make our own. Lets first look over how the Pagination actually looks like.

 

1. LOOKS

Normal Pagination

Ok now that was just the normal Pagination you can modify and change as per your need . You can just style it using some CSS codes.

 

2. CODE  (How to make Pagination)

Pagination pagination = new Pagination(6,0);
pagination.currentPageIndexProperty().addListener(new ChangeListener<Number>(){
	@Override
	public void changed(ObservableValue&lt? extends Number> observable, Number oldValue, Number newValue) {
		//Change UI like table or Pane		
	}
});
//Just add this "pagination" inside some container

As Pagination is inherited from Control class; we can easily place this control at any container like Group,Pane etc.

 

3.STYLE (Make it different)

Although the default style of this control is actually good but the default is not suitable when it comes for the vendor specific design and for different purposes. Lets looks at some CSS styling which I have done differently.

 

Diamond Style Pagination

Diamond Style Pagination

EFFECT: Drop Shadow
CSS:

.pagination{
	-fx-base:black;	
}
.pagination .toggle-button {
	-fx-shape:"m74.63,72.21494l14.50002,-14.49994l14.49998,14.49994l-14.49998,14.50002l-14.50002,-14.50002z";
	-fx-background-radius:3px;
}
.pagination .button{
	-fx-padding: 8 10 8 10px;
	-fx-background-radius:0px; /* This is used for making the Arrow Button Curve*/
}
.pagination .label {
	-fx-text-fill:white;
}

 


Circle Numbering Pagination

Circle Style Pagination|

EFFECT: Drop Shadow
CSS:

.pagination{
	-fx-base:black;
}
.pagination .toggle-button , .mypage .button{
	-fx-background-radius:15px;
	-fx-padding: 0px;
}
.pagination .button{
	-fx-padding: 5 15 5 16px;
}
.pagination .label {
	-fx-text-fill:white;
}

Grid Style Pagination

Grid Style Pagination

Effects: Drop Shadow
CSS:

.pagination{
	-fx-base:black;	
}
.pagination .toggle-button{
	-fx-shape:"m61.73247,191.50499l-6.00997,5.7599m69.1152,-5.50928l5.75948,5.50928m-5.75948,-68.6145l5.75948,-6.01002m-68.86471,5.75976l-5.75947,-5.50913m5.75947,5.38381l63.10523,0l0,63.10521l-63.10523,0l0,-63.10521zm-5.88478,-5.88481l74.87482,0l0,74.87489l-74.87482,0l0,-74.87489z";
	-fx-background-insets: 0, -0.5 6.5 -0.5 6.5,0 7 0 7;
	-fx-padding:0px;

	-fx-background-radius:0px;
}
.pagination .toggle-button:selected{
	-fx-base:white;
}
.pagination .control-box{
	-fx-background-color:linear-gradient(to bottom,black,transparent);;
	-fx-padding:-11 0 0 0px;		
}

.pagination .label {
	-fx-text-fill:white;
}

After working with some styling and Pagination I have made this pagination to work in TableView as well which was really amazing. The below is the screenshot of that demo application.


TableView and Pagination JavaFX

Source Code: Pagination Demo Source Code

This much for today Have a great day coding :)