In our application we were loaded 20000 records in the primefaces data table but we faced some performance issue. so we planned to load the data page by page for that we sent start and end page number to back end and we got minimal records. On every page change we hit the Db and loads the data in data table.
First time i have sent 1 and 100, i got 100 records and total matched record count is 1800. i have set the list value in datable my page size is 50 and it shows the 2 page links in the data table.
i want to set the page links dynamically based on the total matched record. but in primefaces it shows based on the datatable list size. how can i set the page links dynamically.
My expected output:
Wanted:
PF's paginator.
Example from website:
<p:dataTable var="car" value="#{dtPaginatorView.cars}" rows="10"
paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15">
Not wanted:
Most JSF tags (not HTML, of course) support an attribute styleClass="foo" which can be used to attach a class="foo" attribute the resulting HTML tag.
Maybe that is what you need? Sorry, I have never attempted to modify these links (using PF6.0 CE).
Related
I'm using Prime Faces 6.0.
I've a datatable with a LazyDataModel. The user can change the page with the built-in paginator.
When the user switch from the first page, to the second I need to know the currentPage, and I need it in the client part.
This is the code of the datatable
<p:dataTable
id="listingsTable"
value="#{listingsLazyDataModel}"
var="actualAd"
paginator="true"
rows="#{applicationScopedBean.advertisingsPaginationSize}"
lazy="true"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
rowsPerPageTemplate="10,20,30"
paginatorPosition="bottom"
widgetVar="listingsTableDesktop"
first="#{searchAdvertisingModel.currentPage*applicationScopedBean.advertisingsPaginationSize}">
...
...
<p:ajax event="page" listener="#{listingsController.pageChanged}" oncomplete="pageChangedOnDetails(PF('listingsTableDesktop'))" />
...
---
</p:dataTable>
and this is the js code
function pageChangedOnDetails(listingsTableDesktop){
console.log(listingsTableDesktop.paginator.getCurrentPage());
}
The problem is that the getCurrentPage() method returns the previous page. Not the actual one. Just for information, the page is base 0. So the first page is the page 0.
Example of the actual behaviour vs expected one
User land in the page and see the first page.
User switch to the second page. getCurrentPage -> 0 WRONG expected 1
User switch to the third page. getCurrectPage -> 1 WRONG expected 2
User switch to the first page. getCurrentPage -> 2 WRONG expected 0
In which way can I solve this?
Thank you
The base is 0 but your event function is running way to soon it seems.
Try running your function else where other then event="page".
I mean by this, when your page is a 1 (default) and you click for example on page 3, it outputs a 0 (0+1= page 1) and ONLY AFTER THAT it goes to page 3. If you click on page 6 now, it outputs a 2 (2+1= page 3) and ONLY AFTER that it goes to page 6.
This happen even with oncomplete instead of onclick. Hope it helped.
This problem was a bug found in PF 6.0 and 6.1, but with the current version (6.2) this problem is solved
I created some development startup code with the generjee online tool.
Have selected DataGrid for the data list style and have choosen lazy loading for some entities.
Now I'm wondering if Primefaces DataGrid is really able to lazily load the data? In the Primefaces DataGrid Showcase there is nothing about lazy loading. Is this feature supported? I'm new to Faces.
Yes PrimeFaces can do lazy loading, for this, you have to put the attributes.
Here is an example of a lazy DataGrid :
<p:dataGrid var="car" value="#{carBean.cars}" columns="3" rows="12"
paginator="true" lazy="true">
...
</p:dataGrid>
value="#{carBean.cars}" : list of backing Bean
lazy="true" : allow lazy loading
rows="12" : Number of items to load in lazy
paginator="true" : Activate pagination
We are using Primefaces Datatable component where the values are coming from a database.
in our xx.xhtml file below code is present
<p:dataTable id="activitydescription" var="type"
value="#{activityBean.activityList}" rows="#{activityBean.rowNo}" rowKey="#{type.activitySchemeId}"
selection="#{activityBean.activityDTO}"
emptyMessage="No value found with given criteria"
paginatorPosition="bottom" sortMode="single" paginator="#{empty activityBean.activityList ? 'false':'true' }"
dynamic="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
rowIndexVar="rowIndex"> ........
Now when this page is rendered on the browser we have seen a hidden field is created as below..
<input type="hidden" id="formId:activitydescription_selection" name="formId:activitydescription_selection" autocomplete="off" value="" /></div><script id="formId:activitydescription_s" type="text/javascript">
The field is created dynamically when the datatable component is rendered on browser.
So is there any way we can avoid this hidden field to be created.?
I hope i have rephrased my query very clearly.
Any help would be really appreciated.
You can't, this field is needed for the component to function correctly. But.... You can always download the source, implement a different solution and file a patch...
According to the official PrimeFaces 3.2 documentation, the paginator template can be a combination of the following predefined paginator templates:
{FirstPageLink}
{LastPageLink}
{PreviousPageLink}
{NextPageLink}
{PageLinks}
{CurrentPageReport}
{RowsPerPageDropDown}
This is fine for small data sets, but it's extremely hard to navigate thru the pages if the data set is huge: imagine you have a few thousands (or even more) of pages, you're at the very first start, page No. 1, and you want to jump directly to page No. 813, and then -- to No. 499). So:
Is there a way to enhance the existing templates set for the paginator in PrimeFaces 3.2 DataTable, e.g. adding a custom template?
If not, ... is there a way (I assume it as a potential hack) affect the data table navigation like in the scenario I described above?
Your help would be really appreciated.
Thanks in advance.
There is a paginator option {JumpToPageDropdown} you can use to select the page from the dropdown. I don't think it is documented.
I'm using a p:dataTable with pagination like so:
<p:dataTable var="user" value="#{userBean.users}"
paginator="true" rows="20"
paginatorTemplate="{PageLinks}" >
Two questions:
1) Is there a way to tell it to not show the page numbers when there's only one page?
2) When I click from page 1 to page 2, the whole web page refreshes. On the PrimeFaces demo the pagination flips pages with an AJAX-style update. What have I done wrong that the web page is refreshing?
Any help is greatly appreciated, thanks!
rob
Try the following for question 1:
paginatorAlwaysVisible="false"
From the primefaces javadoc:
paginatorAlwaysVisible: Defines if paginator should be hidden when number of rows displayed is less than paginator rowsPerPage option.