function for dataTable with differnt forms of data - jsf

Question

Below is the code snippet:
tansaction.xhtml
<h:form id="form1">
<p:dataTable value="#{transactionMB.transactionEntryList}" var="transInfo" rowStyleClass="tdDownValue">
</p:dataTable>
</h:form>
<h:form id="form2">
<p:dataTable value="#{transactionMB.loggingList}" var="logInfo" rowStyleClass="tdDownValue">
</p:dataTable>
</h:form>
<h:form id="form3">
<p:dataTable value="#{transactionMB.salesEntryList}" var="salesInfo" rowStyleClass="tdDownValue">
</p:dataTable>
</h:form>
Please suggest.Thanks in advance.

Answer 1

The idea is to start long-running initialization of lists after the page load.
You can try something like:
Do not initialize your lists in bean constructor/post construct method. Instead of it, add to the bean public methods, that you will call after page load.
public void loadTransactionEntryList();
public void loadloggingList();
public void loadSalesEntryList();
Add loading indicators near the table, and remoteCommands to call load* methods. Note, that by default loading indicators are shown and tables are hidden. oncomplete call is used to toggle indicator and table after command finishes.
<h:form id="commands-form">
<p:remoteCommand name="loadTransactionEntryListCommand" action="#{transactionMB.loadTransactionEntryList}"
update=":form1" oncomplete="hideLoadingDisplayTable('#form1');"/>
<p:remoteCommand name="loadloggingListCommand" action="#{transactionMB.loadloggingList}"
update=":form2" oncomplete="hideLoadingDisplayTable('#form2');"/>
<p:remoteCommand name="loadSalesEntryListCommand" action="#{transactionMB.loadSalesEntryList}"
update=":form3" oncomplete="hideLoadingDisplayTable('#form3');"/>
</h:form>
<h:form id="form1">
<div class="loading-indicator" style="display: block;">...</div>
<p:dataTable value="#{transactionMB.transactionEntryList}" var="transInfo" rowStyleClass="tdDownValue" style="display: none;">
</p:dataTable>
</h:form>
<h:form id="form2">
<div class="loading-indicator" style="display: block;">...</div>
<p:dataTable value="#{transactionMB.loggingList}" var="logInfo" rowStyleClass="tdDownValue" style="display: none;">
</p:dataTable>
</h:form>
<h:form id="form3">
<div class="loading-indicator" style="display: block;">...</div>
<p:dataTable value="#{transactionMB.salesEntryList}" var="salesInfo" rowStyleClass="tdDownValue" style="display: none;">
</p:dataTable>
</h:form>
Call commands with JavaScript in the end of the document or with jquery's (document ).ready().
<script type="text/javascript">
loadTransactionEntryListCommand();
loadloggingListCommand();
loadSalesEntryListCommand();
</script>
Finally, implement hideLoadingDisplayTable(formId) function to hide loading indicator and show table with JavaScript.

Answer 2

Why don't you use pagination with lazy loading in your data tables. Only first page of data will be loaded when your XHTML page is loaded, which should certainly reduce your load time.
Extend LazyDataModel and implement load(...) methods to lazy load your data in tables.
Initiate your database connections, and create your custom lazyDataModel objects in a method of your backing bean which is annotated with #postConstruct. Maintain current page and page size in your lazyDatalModel. In load(...) method get the next page from the database and return.
These are few links to help you.
Primefaces datatable paginationand lazy loading, see primefaces showcase -
http://www.primefaces.org/showcase/ui/data/datatable/lazy.xhtml
JDBC pagination -
http://java.avdiel.com/Tutorials/JDBCPaging.html
If you are using Persistance (JPA or Hibernate ), see for setFirstResult() and setMaxResult() methods of Query object.