voyent
sorting datatable  XML
Forum Index -> Components
Author Message
renaat

Joined: 24/Apr/2006 00:00:00
Messages: 21
Offline


hey...
can anyone tell me what to do tot make a datatable sortable? I looked at the source but the example uses an array and I'm using a vector filled up by DB, anyone have a step by step thing?

thx
[Email]
pabreau

Joined: 11/May/2006 00:00:00
Messages: 23
Offline


There's a good example of how to create a sortable datatable in the ICEfaces component-showcase demo. The key attributes to set on the ice:dataTable tag are:

sortColumn="#{dataSortList.sort}"
sortAscending="#{dataSortList.ascending}"

and include the ice:commandSortHeader in the dataTable column facet:

<ice:column>
<f:facet name="header">
<ice:commandSortHeader columnName="firstName" arrow="true">
<ice:outputText value="First Name"/>
</ice:commandSortHeader>
</f:facet>
<ice:outputText value="#{person.firstName}"/>
</ice:column>

Philip
ICEsoft Technologies Inc.
[Email]
renaat

Joined: 24/Apr/2006 00:00:00
Messages: 21
Offline


thx but the thing i don't get is the backing beans... for it. do you perhaps have a simple example for that that you can send me? so just a datatable with some data and sort on a column so I can see what the bean is supposed to be...

appreciate it
Renaat
[Email]
pabreau

Joined: 11/May/2006 00:00:00
Messages: 23
Offline


You'll notice that the backing bean, 'dataSortList', maps to com.icesot.icefaces.samples.showcase.DataTablePaginatorBean (you can find this in the CE download under src/component-showcase/src/..). This class derives from the abstract class in the same package, SortableList, which defines a sort(String) method, which itself calls a sort(String column, boolean ascending) method in the derived class, which contains an anonymous Comparator class used to sort the sort the data. Sorry if that's confusing ;), in a nutshell, you just have to implement a void sort(String columnName) in your backing bean, sort the data, then the ui will update accordingly.
[Email]
pabreau

Joined: 11/May/2006 00:00:00
Messages: 23
Offline


If you really want to load your data into a Vector (but I'd caution against using a Vector, much slower than other collection classes, but perhaps you have another reason for using it?) I've modified the Component-Showcase dataTable example to first load data into a Vector, then transform the Vector into an array (see DataTablePaginatorBean in the attachment)
 Filename DataTablePaginatorBean.java [Disk] Download
 Description No description given
 Filesize 7 Kbytes
 Downloaded:  945 time(s)

[Email]
kwast

Joined: 31/Aug/2009 00:00:00
Messages: 2
Offline


hi all,

I've a problem concerning sorting a dataTable of iceFaces.

I followed the tutorial, but when i try to sort in the browser i get javascript errors...
I look at it with firebug and i see standing with the action of the <ice:form>
action="javascript:;"
is this normal?
I do exactely the same as the tutorial.
Any help?

kind regards
davidfg

Joined: 04/Feb/2009 00:00:00
Messages: 161
Offline


Post your code
kwast

Joined: 31/Aug/2009 00:00:00
Messages: 2
Offline


what code do you need?

1. I use the abstract SortableListBean from the example.
2. OrganisationBean:

Code:
 public class OrganisationBean extends AbstractSortableListBean {
 	private WwjwService wwjwService;
 	private List<OrganisationDbo> organisations;
 
 	private static final String nameColumn = "Naam";
 	private static final String codeColumn = "Code";
 	private static final String streetNumberColumn = "Straat en nr";
 	private static final String cityColumn = "Gemeente";
 	private static final String lastUpdatedColumn = "Laatste wijziging";
 	private static final String headColumn = "Hoofd?";
 	
 	public OrganisationBean() {
 		super(nameColumn);
 		organisations = new LinkedList<OrganisationDbo>();
 	}
 	
 	/**
 	 * Sets the wwjwService.
 	 *
 	 * @param wwjwService the wwjwService to set
 	 */
 	public void setWwjwService(WwjwService wwjwService) {
 		this.wwjwService = wwjwService;
 	}
 	
 	/**
 	 * Returns the nameColumn property.
 	 * @return The nameColumn property.
 	 */
 	public String getNameColumn() {
 		return nameColumn;
 	}
 
 	/**
 	 * Returns the codeColumn property.
 	 * @return The codeCOlumn property.
 	 */
 	public String getCodeColumn() {
 		return codeColumn;
 	}
 
 	/**
 	 * Returns the streetNumberColumn property.
 	 * @return The streetNumberColumn property.
 	 */
 	public String getStreetNumberColumn() {
 		return streetNumberColumn;
 	}
 
 	/**
 	 * Returns the cityColumn property.
 	 * @return The cityColumn property.
 	 */
 	public String getCityColumn() {
 		return cityColumn;
 	}
 
 	/**
 	 * Returns the lastUpdatedColumn property.
 	 * @return The lastUpdatedColumn property.
 	 */
 	public String getLastUpdatedColumn() {
 		return lastUpdatedColumn;
 	}
 
 	/**
 	 * Returns the headColumn property.
 	 * @return The headColumn property.
 	 */
 	public String getHeadColumn() {
 		return headColumn;
 	}
 
 	/**
 	 * {@inheritDoc}
 	 */
 	@Override
 	protected boolean isDefaultAscending(String sortColumn) {
 		return true;
 	}
 	
 	/**
 	 * Gets the organisations.
 	 * @return List of all the organisations.
 	 */
 	public List<OrganisationDbo> getOrganisations() {
 		if(organisations.isEmpty()){
 			organisations = wwjwService.getOrganisations();
 		}
 		if (!oldSort.equals(sortColumnName) ||
                 oldAscending != ascending){
              sort();
              oldSort = sortColumnName;
              oldAscending = ascending;
         }
 		return organisations;
 	}
 
 	/**
 	 * {@inheritDoc}
 	 */
 	@Override
 	protected void sort() {
 		Comparator<OrganisationDbo> comparator = new Comparator<OrganisationDbo>() {
 
 			/**
 			 * {@inheritDoc}
 			 */
 			@Override
 			public int compare(OrganisationDbo o1, OrganisationDbo o2) {
 				if (sortColumnName == null) {
 					return 0;
 				}
 				if(sortColumnName.equals(nameColumn)){
 					return ascending ?
 							o1.getName().compareTo(o2.getName()) :
 							o2.getName().compareTo(o1.getName());
 				}else if(sortColumnName.equals(codeColumn)){
 					return ascending ?
 							o1.getCode().compareTo(o2.getCode()) :
 							o2.getCode().compareTo(o1.getCode());
 				}else if(sortColumnName.equals(streetNumberColumn)){
 					String streetHouseNumberO1 = o1.getStreet() + " " + o1.getHouseNumber();
 					String streetHouseNumberO2 = o2.getStreet() + " " + o2.getHouseNumber();
 					return ascending ?
 							streetHouseNumberO1.compareTo(streetHouseNumberO2) :
 							streetHouseNumberO2.compareTo(streetHouseNumberO1);
 				}else if(sortColumnName.equals(cityColumn)){
 					return ascending ?
 							o1.getCity().compareTo(o2.getCity()) :
 							o2.getCity().compareTo(o1.getCity());
 				}else if(sortColumnName.equals(lastUpdatedColumn)){
 					return ascending ?
 							o1.getLastUpdated().compareTo(o2.getLastUpdated()) :
 							o2.getLastUpdated().compareTo(o1.getLastUpdated());
 				}else if(sortColumnName.equals(headColumn)){
 					// must be implemented
 				}
 				return 0;
 			}
 			
 		};
 		Collections.sort(organisations, comparator);
 	}
 	
 }
 


3.:organisations.jsp:
Code:
 
 <f:view xmlns:h="http://java.sun.com/jsf/html"
 	xmlns:f="http://java.sun.com/jsf/core"
 	xmlns:ice="http://www.icesoft.com/icefaces/component">
 
 	<ice:outputDeclaration doctypeRoot="HTML"
 		doctypePublic="-//W3C//DTD HTML 4.01 Transitional//EN"
 		doctypeSystem="http://www.w3.org/TR/html4/loose.dtd" />
 
 	<html>
 	<head>
 	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
 	<title>test</title>
 	</head>
 
 	<body>
 	<ice:form>
 		
 		<ice:dataTable id="dataOrganisations"
 			sortColumn="#{organisationBean.sortColumnName}"
 			sortAscending="#{organisationBean.ascending}"
 			value="#{organisationBean.organisations}" 
 			var="organisation">
 			<ice:column>
 				<f:facet name="header">
 					<ice:commandSortHeader 
 						columnName="#{organisationBean.nameColumn}" arrow="true">
 						<ice:outputText value="#{organisationBean.nameColumn}" />
 					</ice:commandSortHeader>
 				</f:facet>
 				<ice:outputText value="#{organisation.name}" />
 			</ice:column>
 			<ice:column>
 				<f:facet name="header">
 					<ice:commandSortHeader
 						columnName="#{organisationBean.codeColumn}" arrow="true">
 						<ice:outputText value="#{organisationBean.codeColumn}" />
 					</ice:commandSortHeader>
 				</f:facet>
 				<ice:outputText value="#{organisation.code}" />
 			</ice:column>
 			<ice:column>
 				<f:facet name="header">
 					<ice:commandSortHeader
 						columnName="#{organisationBean.streetNumberColumn}" arrow="true">
 						<ice:outputText value="#{organisationBean.streetNumberColumn}" />
 					</ice:commandSortHeader>
 				</f:facet>
 				<ice:outputText value="#{organisation.street} #{organisation.houseNumber}" />
 			</ice:column>
 			<ice:column>
 				<f:facet name="header">
 					<ice:commandSortHeader
 						columnName="#{organisationBean.cityColumn}" arrow="true">
 						<ice:outputText value="#{organisationBean.cityColumn}" />
 					</ice:commandSortHeader>
 				</f:facet>
 				<ice:outputText value="#{organisation.city}" />
 			</ice:column>
 			<ice:column>
 				<f:facet name="header">
 					<ice:commandSortHeader
 						columnName="#{organisationBean.lastUpdatedColumn}" arrow="true">
 						<ice:outputText value="#{organisationBean.lastUpdatedColumn}" />
 					</ice:commandSortHeader>
 				</f:facet>
 				<ice:outputText value="#{organisation.lastUpdated}" />
 			</ice:column>
 			<ice:column>
 				<f:facet name="header">
 					<ice:commandSortHeader
 						columnName="#{organisationBean.headColumn}" arrow="true">
 						<ice:outputText value="#{organisationBean.headColumn}" />
 					</ice:commandSortHeader>
 				</f:facet>
 				<ice:outputText value="#{organisation.head}" />
 			</ice:column>
 		</ice:dataTable>
 		
 	</ice:form>
 	</body>
 	</html>
 </f:view>
 
 


UPDATE:

The first attachment picture shows the javascript errors when i enter the page.
The second is when i try to sort a header or paginate.



kind regards
[Thumb - first.jpg]
 Filename first.jpg [Disk] Download
 Description
 Filesize 116 Kbytes
 Downloaded:  429 time(s)

[Thumb - second.jpg]
 Filename second.jpg [Disk] Download
 Description
 Filesize 138 Kbytes
 Downloaded:  385 time(s)

Abhishek@Neobytes

Joined: 15/Nov/2010 22:35:07
Messages: 1
Offline


I too am facing the same issue as "kwast". Any solutions???
 
Forum Index -> Components
Go to:   
Powered by JForum 2.1.7ice © JForum Team