How to write <table> markup without JSF tag libraries (h: datatable or ui: repeat), but still use JSF to control page flow

Question

I have different tables with the following size: 12 columns and up to 1800 rows. The user needs 8 seconds to render. I am currently using h:dataTable . I tried ui:repeat to get row data from a Java List object managed by JSF. Although this works great, 8 seconds to display a table is not acceptable. I am trying to find other ways to do this, but I need to save JSF as my controller buttons for the actions on the page. In other words, I want to create a table page to send to the for myself and then still associate actions on h: commandButtons` for managed bean methods. Is there any way to do this?

The only thing I can think of is to use jquery or ajax to create the table layout, although I am new to technologies other than JSF for developing the user interface. Maybe I would somehow pass this on to the client for visualization. The only problem is that I don’t know how to generate markup from my list, and secondly, how I will enter it between h:commandButtons , which are in my XHTML file at present.

Does anyone know how I can solve this problem without trying to completely break JSF? One of the main problems I encountered is that the business requirement , which states that we cannot link to data pages (for example, the Next / Back buttons that display 100 at a time) . So maybe I thought I could do this with Ajax calls to the server and get 100 lines at a time after the page is ready and add new lines backstage for the user. This will be the “perceived” download speed, but I don’t know how to do it at all.

Answer 1

8 seconds is not bad for a whopping 1800 rows on 12 columns. 10 ~ 100 lines are executed in less than a second, right?

Before proceeding, are you absolutely sure that all these 1800 lines should be shown right away? Is this user not hostile? Does the user need Ctrl + F to search for the information he is looking for? Isn't that annoying? Why don't you introduce filtering (search box) and pagination just like Google does to present a million results in a reasonable and user-friendly way?

In any case, you can use the option "On-Demand data" PrimeFaces <p:dataTable> , where the data is loaded by ajax while scrolling through <p:dataTable liveScroll="true"> . See also demo. No inline code or manual use of jQuery. PrimeFaces did it all under the covers.

For some reason you don't want to use PrimeFaces, then you can use OmniFaces <o:componentIdParam> in conjunction with some jQuery live scroll plugins . See also the last example in the page of it (snapshot) for a launch example (which should be easily adapted for launch by clicking the bottom of the scrollbar by clicking).