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
Related
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).
i have previously used datatable pagination and it worked as a charm. This time i needed to use the lazy loaded pagination and its showing the first page and there are no paginator buttons. I have tried a lot of things but it just isnt showing the paginator buttons. if i change the number of rows, it works i.e the number of rows on tht page changed but the paginaotor buttons are not showing. if i inspect the datatable in chrome, it shows thr is a div for the paginator bottom
<div xmlns="http://www.w3.org/1999/xhtml" id="j_idt7:contentTable_paginatorbottom" class="ui-paginator ui-paginator-bottom ui-widget-header ui-corner-bl ui-corner-br"></div>
this is my datatable
<p:dataTable id="contentTable" value="#{chatroomBean.lazyLoadedChatroomBeans}"
var="chatroom" paginator="true" paginatorPosition="bottom" rows="10" lazy="true"
paginatorTemplate=" {PreviousPageLink} {CurrentPageReport} {NextPageLink} "
rendered="#{chatroomBean.chatroomSearchText!=null}">
i am using jsf2, primefaces 2.2.1 and apache tomcat 6.
any help idea will be much appreciated. thanks
regards
khizar
I think you've run into this bug.
From the linked-to forum discussion:
Here is a workaround. Copy the
following lines in your load-Methode,
to update the pagination:
RequestContext context =
RequestContext.getCurrentInstance();
if(context!=null)context.addCallbackParam("totalRecords",
i);
The Variable i stand for the result of
the projections query.
its late but i just saw this question n remembered tht i had solved the prob so i thot i shud leave an answer here just in case sum1 else runs into it. the problem was tht the theme i was using cudnt find the images for the buttons, due to sum reason i cant remember now, i was not using the jar for the theme, i just added the theme.css to my project and it started working ... only problem was the links to images in the theme.css were like
url("#{resource['primefaces-glass-x:images/default.png']}") 0 0
changed them to this
url(images/default.png) 0 0
n it works like a charm ...
another solution (n probably the better one) wud be to add the jar for the theme in classpath and add the theme to web.xml but everyone probably knows tht ... :)
Regards,
khizar
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.
I am developing a Seam-Jsfv1.2-EJB3 web app.
I have a datatable and checkboxes in each row. Moreover, I have a datascroller at the bottom of my table as well.
My problem is when I click the next page number from the scroller, the selected checkboxes at the first page of the datatable is gone. I mean, even if they were selected, clicking the next page make them deselected. I see it by going back to the first page again by clicking the scroller.
Do you have any idea about that problem?
In order to clearify my case, I attached my code below:
<rich:dataTable
id="apiV2ProductList" rows="10" var="_apiV2Product"
value="#{apiV2ProductList.resultList}"
rendered="#{not empty apiV2ProductList.resultList}" reRender="ds">
<rich:column>
<f:facet name="header">
<h:selectBooleanCheckbox id="selectionCheckAll" onclick="selectAll()" />
</f:facet>
<h:selectBooleanCheckbox id="selectionCheck" onclick="increase(this)" value="#{_apiV2Product.selectValue}" >
</h:selectBooleanCheckbox>
</rich:column>
...
<f:facet name="footer">
<rich:datascroller id="ds" renderIfSinglePage="false">
</rich:datascroller>
</f:facet>
Many thanks in advance.
Baris
You can extend the org.richfaces.renderkit.html.DatascrollerTemplate
write your own DataScroller for your own styling by adding a component with the below configuration in faces-config.xml
<component>
<component-type>exCustHtmlDatascroller</component-type>
<component-lass>org.jsf.common.ui.EXCustHtmlDatascroller</component-class>
</component>
<render-kit>
<renderer>
<component-family>org.richfaces.Datascroller</component-family>
<renderer-type>exCustDataScrollerTemplate</renderer-type>
<renderer- class>org.jsf.common.ui.EXCustDataScrollerTemplate</renderer-class>
</renderer>
</render-kit>
Adding an a4j support tag between scroller has solved my problem:
<f:facet name="footer">
<rich:datascroller id="ds" renderIfSinglePage="false">
<a4j:support event="onpagechange"/>
</rich:datascroller>
</f:facet>
However the other thing is, I am using JQuery to style my table (ex. on mouse over and out), and this time, when I click the next page of my table, the style is gone.
Any help would be great, many thanks in advance.
**
PS: BTW the wierest thing to my mind is it comes me impossible to find a solution by yourself for this kind of problems. Your creation may not always be enough to solve (at least here in my example, adding a4j:support thing) I am asking experts, how can we handle that kind of things by ourselves...
**
You don't need jQuery for styling the datatable
<rich:dataTable id="dataTable" var="x"
onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
The problem you were seeing with the styles being removed is due to the nature of AJAX, and the way the table is reRendered.
Assuming you were firing the initial styling call based on some form of page onLoad, the first time the page is rendered, your styles will be applied. However, when you click the "next" button with the paginator, you are pulling a lot of new HTML down, and replacing the old HTML in the table with the newer, updated information. The proble you're seeing is that you saw styling because jQuery applied styles to the old nodes, upon reRender, those nodes are completely thrown away, along with their styling. You simply need to figure out the hook to call the "styling" method, and re-execute that call after the table is re-rendered.
Generally, I use an a4j:status tag, and set up the onstart or onstop to re-parse the table.
I've got unexpected problems with richfaces (3.3.2) modal panel. When i try to open it, browser opens two panels instead of one: one is in the center, another is in the upper left corner. Besides, no fading happens. Also i have three modes: view, edit, new - and when i open my panel it should show either "Create new..." or "Edit..." in the header and actually it shows but not in the header as the latter isn't rendered at all though it should, because i set proper mode in action before opening this modal panel. Besides it works fine on all other pages i've made and there are tens of such pages in my application. I can't understand what's wrong here. The only way to fix it is to remove <a4j:keepAlive/> from the page that is very strange, imho.
I'm not sure if code will be usefull here as it works fine everywhere in my application but this only case. So if you put it on your page it will probably work without problems. My only question is: are there any hidden or rare problems in interaction of these two elements (<rich:modalPanel> and <a4j:keepAlive>)? Or shall i spent another two or three days searching for some wrong comma, parenthesis or whatever in my code? :)
For most curious. Panel itself:
<!-- there's no outer form -->
<rich:modalPanel id="panel" autosized="true" minWidth="300" minHeight="200">
<f:facet name="header">
<h:panelGroup id="panelHeader">
<h:outputText value="#{msg.new_smth}" rendered="#{MbSmth.newMode}"/>
<h:outputText value="#{msg.edit_smth}" rendered="#{MbSmth.editMode}"/>
</h:panelGroup>
</f:facet>
<h:panelGroup id="panelDiv">
<h:form >
<!-- fields and buttons -->
</h:form>
</h:panelGroup>
</rich:modalPanel>
One of the buttons that open panel:
<a4j:commandButton id="addBtn"
reRender="panelHeader, panelDiv"
value="#{form.add}"
oncomplete="#{rich:component('panel')}.show()"
action="#{MbSmth.add}"
image="create.gif"/>
Action invoked on button click:
public void add() {
curMode = NEW_MODE; // initial mode is VIEW_MODE
newSmth = new Smth();
}
Mode check:
public boolean isNewMode() {
return curMode == NEW_MODE;
}
public boolean isEditMode() {
return curMode == EDIT_MODE;
}
remember that the modalPanel is always there, but it's hidden. i think the keepAlive is showing this at all times.
Add domElementAttachment="parent" parameter to rich:modalPanel, and the editor will work fine.