In ADF 10g, table component was working only with pagination support, in ADF 11g table component was improved greatly and now it works with scrollable support. However, time to time we hear customer requests to provide pagination support for ADF 11g table, as it was in ADF 10g. There are different requirements, when table pagination would work much better comparing to scrollable functionality. Ideally, ADF 11g table should support both options - pagination and scrollable functionality. While pagination is not supported, we can implement our own custom table component. This post implements it as a task flow, in my future posts I will publish ADF reusable component based on similar approach.
Download sample application with custom table implementation - CustomLayoutADFIterator.zip.
Custom table is implemented using af:iterator tag. This tag allows to render collection of data, just the same as af:table tag renders. Same as af:table tag, af:iterator can be based on table binding available in page definition. It iterates over data collection and renders data rows - this allows to generate table view:
Value property of af:iterator is binded to collection model from ADF bindings declaration. Number of visible rows at one time (on one page) is set to 10, initial row to render is set from first row 0:
Next or previous page of rows is rendered by changing first row indicator, last page is calculated as well. Good thing, we dont need to store indicator for current page in the memory, we can always calculate it:
af:iterator tag points to ADF bindings table declaration, it gets same collection model as af:table tag:
Here is example of custom table from provided sample application. You can change layout, add more functionality - its all standard ADF components:
It always displays 10 rows (configurable) on the page, provides buttons to navigate between pages and shows current page number. If user is moves to second or third page, navigation buttons for previous page become enabled:
If we navigate to the last page, navigation buttons for next navigation become disabled:
This table provides option to click either on First Name or Last Name and open editable pop-up for current row:
User hits OK button, changes are saved and our custom table current page is refreshed with changed data:
With af:iterator tag, we can't get current row as we are used to do with af:table. This can be resolved by declaring JSF attribute for command link component, and retrieving this attribute inside managed bean method. Attribute value is used to set current row for editable pop-up:
Download sample application with custom table implementation - CustomLayoutADFIterator.zip.
Custom table is implemented using af:iterator tag. This tag allows to render collection of data, just the same as af:table tag renders. Same as af:table tag, af:iterator can be based on table binding available in page definition. It iterates over data collection and renders data rows - this allows to generate table view:
Value property of af:iterator is binded to collection model from ADF bindings declaration. Number of visible rows at one time (on one page) is set to 10, initial row to render is set from first row 0:
Next or previous page of rows is rendered by changing first row indicator, last page is calculated as well. Good thing, we dont need to store indicator for current page in the memory, we can always calculate it:
af:iterator tag points to ADF bindings table declaration, it gets same collection model as af:table tag:
Here is example of custom table from provided sample application. You can change layout, add more functionality - its all standard ADF components:
It always displays 10 rows (configurable) on the page, provides buttons to navigate between pages and shows current page number. If user is moves to second or third page, navigation buttons for previous page become enabled:
If we navigate to the last page, navigation buttons for next navigation become disabled:
This table provides option to click either on First Name or Last Name and open editable pop-up for current row:
User hits OK button, changes are saved and our custom table current page is refreshed with changed data:
With af:iterator tag, we can't get current row as we are used to do with af:table. This can be resolved by declaring JSF attribute for command link component, and retrieving this attribute inside managed bean method. Attribute value is used to set current row for editable pop-up:
