how to create table with paging with jsf, icefaces, java and html

Explanation


New to Java, JSF, Icefaces? Here is some links to start with:
Why and when use ICEFACES?
First steps with jsf and java
icefaces without icefaces

In this example, instead of 'ui:repeat' we will use custom 'iceext:loop' tag.
This tag add some functionality like paging, mod, index.
Getting started with custom loop component
how to create custom loop jsf component: source code and example
Example for custom loop jsf component with zebra style and index

We use simplest HTML tags, together with "loop" tag, which loops on 'tr' element. We use "loop" tag, which works like 'ui:repeat' but add more functionality like paging, 'index' variable, 'mod' variable, and more
Also, we use 'iceext:tr' tag. This tag render 'tr' but has possibility create action binding on click event, in this example to select row.
Pros: every programmer, even not-jsf, can understand it. CSS is transparent: what you see is what you get.
Customization is simple too.
Use you favorite HTML editor, or JSF editor together with CSS tools to customize every aspect of this table, its easy!
fragment from TableWithPaging.jspx

	<table> 
		<caption>table with paging</caption> 
		<tr> 
			<td>Name</td> 
			<td>Phone</td> 
		</tr> 
		<iceext:loop id="tableWithTooManyRows" value="#{tableWithPagingBean.rows}" 
			var="row" rows="10"> 
			<iceext:tr action="#{row.select}" 
				style="#{(row.selected)?'background-color: gray;' : ''}"> 
				<td><ice:outputText value="#{row.object.name}" /></td> 
				<td><ice:outputText value="#{row.object.phone}" /></td> 
			</iceext:tr> 
		</iceext:loop> 
	</table> 

This is main entry point. Its referenced by 'tableWithPagingBean' from faces-config.xml
com.gpost.jsfexamples.tableWithPaging.TableWithPagingBean

package com.gpost.jsfexamples.tableWithPaging;

import java.util.List;

import com.drytools.collections.selectable.SelectableArrayList;
import com.drytools.tables.rows.ISelectableTableRow;
import com.drytools.tables.rows.SelectableTableRow;

/*
* Java class for example 'table with paging'
* referenced as 'tableWithPagingBean' from faces-config.xml, 
* used in 'TableWithPaging.jspx'
*/
public class TableWithPagingBean{

	List<ISelectableTableRow<ManWithPhone>> rows;

	public List<ISelectableTableRow<ManWithPhone>> getRows() {
		if (rows == null) {
			rows = new SelectableArrayList<ISelectableTableRow<ManWithPhone>>();
			
			// create same sample data...
			rows.add(new SelectableTableRow<ManWithPhone>(new ManWithPhone("Gary", "1234-6767")));
			rows.add(new SelectableTableRow<ManWithPhone>(new ManWithPhone("Bob", "5678-4553")));
			rows.add(new SelectableTableRow<ManWithPhone>(new ManWithPhone("John", "5698-4333")));
			
			// create more data so we can see paging...
			for (int i = 0; i < 100; i++) {
				rows.add(new SelectableTableRow<ManWithPhone>(new ManWithPhone("name"+i, "111-222-"+i)));
			}
			
		}
		return rows;
	}



} // end of class

This class defines data in row.
com.gpost.jsfexamples.tableWithPaging.ManWithPhone

package com.gpost.jsfexamples.tableWithPaging;

public class ManWithPhone {
	public ManWithPhone(String name, String phone) {
		super();
		this.name = name;
		this.phone = phone;
	}

	String name;
	
	String phone;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getPhone() {
		return phone;
	}

	public void setPhone(String phone) {
		this.phone = phone;
	}
}

part of faces-config.xml

<managed-bean>
 <managed-bean-name>tableWithPagingBean</managed-bean-name>
 <managed-bean-class>com.gpost.jsfexamples.tableWithPaging.TableWithPagingBean</managed-bean-class>
 <managed-bean-scope>session</managed-bean-scope>

</managed-bean>

conclusion
As we saw in this example, you can create perfect table with paging using simple html/css, then add some binding to your java beans and you get very flexible, easily customizable data table without complexity of 'h:dataTable' component.