[ KAWWA PORTAL ] Components : Pagination

Results 1 to 10 of 20

[ First page ] [ Previous page ] 1 | 2

CSS Code

COPY

```
div.k-pagination {
```
```
	position: relative;
```
```
	float: left;
```
```
	width: 100%;
```
```
	color: #000;
```
```
	background: #FFF;
```
```
	margin: 2em 0;
```
```
	padding: 0.9em 0 0.7em;
```
```
	border-top: 4px solid #000;
```
```
	border-bottom: 1px dashed #666;
```
```
}
```
```
	div.k-pagination p {
```
```
		font-size: 0.75em;
```
```
		text-transform: uppercase;
```
```
		margin: 0;
```
```
	}
```

	p.lines-to-display {float: left; width: 45%; padding-top: 0.6em;}

		p.lines-to-display label {width: auto; font-weight: normal; margin-top: -0.3em;}

	div.k-pagination p.total-pages {position: absolute; top: -2em; right: 0; font-size: 1em;}

	p.page-numbers {float: right; width: 45%; color: #FFF; text-align: right;}

	p.page-numbers strong, p.page-numbers a, p.page-numbers a:link {

```
		display: inline-block;
```
```
		width: 2em;
```
```
		height: 2em;
```

		font-family: open_sansbold, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

```
		text-align: center;
```
```
		text-decoration: none;
```
```
		color: #000;
```
```
		background:  #CCC;
```
```
		padding: 0.6em 0.4em 0;
```
```
		margin: 0 0.3em;
```
```
		border-radius: 3px;
```
```
		vertical-align: middle;
```
```
	}
```

	p.page-numbers strong {color:  #FFF; background: #000;}

	p.page-numbers a:hover {background: #808080;}

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:

Tapestry Integration

The Pagination Component is available thanks to the Kawwa2Grid compononent, which has the same behavior (parameters ... ) as the Grid Component. The Kawwa2Grid component has 2 extra parameters in order to configure the pager.

Kawwa2Grid parameters
Name	Required	Java Type	Default Prefix	Default Value	Description
maxAge	false	int	literal	24 * 60 * 60 * 7	Max age in seconds for the number of row per page cookie.
navigatorOptions	false	String	literal	5,10,15,20	A String representing the different values of the select input, used for selecting the number of rows.

The Kawwa2Grid can also display automatically a filter form. You just need to set the criterium parameter. Tapestry will use this object to generate a form thanks to the BeanEditor component. When the form will be submitted,Tapestry will propagate 2 events :

KawwaEventsConstants.UPDATE_GRID_DATA_SOURCE
KawwaEventsConstants.RESET_GRID_DATA_SOURCE_FILTER

You can create method catching these events, and filter your data source. You can also configure 3 labels thanks to 3 others parameters :

filterHeader : Header of the block containing the Filter form
submitLabel : Value for the submit input of the Filter form
resetLabel : Value for the reset input of the Filter form

The Template

COPY

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" xmlns:p="tapestry:parameter">

```
 
```

	<table t:type="kawwa2/Kawwa2Grid" t:source="allCelebrities" t:rowsPerPage="5"

        t:exclude="id, biography, birthDateVerified"

		t:reorder="lastName,firstName,occupation,dateOfBirth" t:model="model" t:row="current" >

```
		
```
```
		
```
```
	</table> 
```
```
    
```
```
</html>
```

Java Implementation

COPY

```
import java.util.Date;
```

import net.atos.kawwaportal.components.test.data.Celebrity;

import net.atos.kawwaportal.components.test.data.Occupation;

import org.apache.tapestry5.ComponentResources;

import org.apache.tapestry5.beaneditor.BeanModel;

import org.apache.tapestry5.ioc.annotations.Inject;

import org.apache.tapestry5.services.BeanModelSource;

```
public class Kawwa2Grid {
```
```
	
```
```
	@Property
```
```
	private Celebrity celebrity;
```
```
	@Property
```
```
	private Celebrity current;
```

	public List<Celebrity> getAllCelebrities() {

```
		
```

		List<Celebrity> celebrities = new ArrayList<Celebrity>();

```
		
```

		celebrities.add(new Celebrity("Britney", "Spearce", new Date(), Occupation.SINGER));

		celebrities.add(new Celebrity("Bill", "Clinton", new Date(), Occupation.POLITICIAN));

		celebrities.add(new Celebrity("Placido", "Domingo", new Date(), Occupation.SINGER));

		celebrities.add(new Celebrity("Albert", "Einstein", new Date(), Occupation.SCIENTIST));

		celebrities.add(new Celebrity("Ernest", "Hemingway", new Date(), Occupation.WRITER));

		celebrities.add(new Celebrity("Luciano", "Pavarotti", new Date(), Occupation.SINGER));

		celebrities.add(new Celebrity("Ronald", "Reagan", new Date(), Occupation.POLITICIAN));

		celebrities.add(new Celebrity("Pablo", "Picasso", new Date(), Occupation.ARTIST));

		celebrities.add(new Celebrity("Blaise", "Pascal", new Date(), Occupation.SCIENTIST));

		celebrities.add(new Celebrity("Isaac", "Newton", new Date(), Occupation.SCIENTIST));

		celebrities.add(new Celebrity("Antonio", "Vivaldi", new Date(), Occupation.COMPOSER));

		celebrities.add(new Celebrity("Niccolo", "Paganini", new Date(), Occupation.MUSICIAN));

		celebrities.add(new Celebrity("Johannes", "Kepler", new Date(), Occupation.SCIENTIST));

		celebrities.add(new Celebrity("Franz", "Kafka", new Date(), Occupation.WRITER));

		celebrities.add(new Celebrity("George", "Gershwin", new Date(), Occupation.COMPOSER));

```
		
```
```
		return celebrities;
```
```
	}
```
```
	
```
```
	@Inject
```
```
	private ComponentResources resources; 
```
```
	
```
```
	@Inject
```

	private BeanModelSource beanModelSource;

```
	
```
```
	@SuppressWarnings("unchecked")
```
```
	private BeanModel model;
```
```
	
```
```
	@SuppressWarnings("unchecked")
```
```
	public BeanModel getModel() {
```

		this.model = beanModelSource.createDisplayModel(Celebrity.class,resources.getMessages());

		this.model.get("firstName").sortable(false);

```
		return model;
```
```
	}
```
```
	
```
```
	
```
```
}
```

KAWWA Markup Pattern Library

Site Utilities

Pagination

HTML5 Plain Code

CSS Code

IE Backward Compatibility

Tapestry Integration

The Template

Java Implementation

Download List (0)

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce