I have a simple primefaces datatable with paginator="true". The table has data and the arrow buttons are showing for the paginator but when I click one nothing happens. It doesn't even appear to post back to the server. Here is my datatable declaration:
<p:dataTable id="datatable" var="currentRow" value="#{myBean.Items}" paginator="true" rows="10">
Am I missing something?
Thanks!
Make sure your table is inside a <h:form> element.
Related
Stickyheader works in pages, I have a datatable inside a dialog which has more than 100 rows, user has to scroll down
<p:dialog>
<p:datatable stickyHeader="true" >
..
..
..
</p:datatable>
</p:dialog>
I need to enable fixed columnheaders for the datatable.
stickyHeader="true" won't work inside a dialog, finally i found an alternative solution to this
<p:dialog>
<p:datatable scrollable="true" scrollHeight="150" >
..
..
..
</p:datatable>
</p:dialog>
This worked well for me
Scrollable is something different than Sticky Header, but if you need your dataTable to behave exactly like primeface's Sticky Header, you can use this feature.
Here jsfiddle.net/DTcHh/1360/ is an easy example how to use it.
I have a jsf page in the form of
<h:form>
<rich:dataTable id="myTable">
<!--Table Data-->
</rich:dataTable>
<rich:dataScroller for="myTable"/>
</h:form>
When the table is in a <h:form> it doesn't scroll (the scroller is disabled) but once I take them out of the <h:form> it works fine. Issue is I need them to be in a form for the rest of my code to work. Anyone know the reason for the issue? I've seen people ask about it but no good answers.
I figured it out. I was using the form in a modal pane and the <ui:include> was within a <h:form> so there was an issue with it being a form within a form.
The scenario is like this:
There is a datatable with many rows and each row contains an inputtext, there is a keypad outside the table, when user click a button in the keypad, the inputtext within the selectedRow would be updated, I want it to be onfocus so user can also use keyboard to input further texts.
I used p:commandButton to be the keypad button with use ajax submit to set selectedItem in bean and update the datatable to make the inputtext change, but after that, the focus is either lost or on the first inputtext of the page.
I am using primeface 3.4.
The codes go something like this:
<p:dataTable id="datatable1" var="item" value="#{bean.itemlist}" rowKey="#{item.id}" rowIndexVar="rowIndex"
widgetVar="datatableVar" selection="#{bean.selectedItem}" selectionMode="single">
<p:column>
<p:inputText id="name" value="#{bean.selectedItem.name}"
onfocus="datatableVar.unselectAllRows();datatableVar.selectRow(#{rowIndex})" >
</p:column>
...
</p:dataTable>
<p:commandButton value="1" update="datatable1" id="bt1"
actionListener="#{bean.appendItem('1')}" />
I guest I could use oncomplete event of p:commandButton to set the inputtext focus, but there seems no client side API in p:dataTable to get the selected Row.
I ended up using jQuery selector to select that inputText. In the rendered html code,the selected row(tr) has an attributed "aria-selected='true'".
The JS code goes:
var ele=$($("[aria-selected='true']").find('input').get(0));
The ele is a jQuery component that I can operate with, like ele.focus() or ele.keyup()
I am using primefaces 3.2
How can I know when the user is pushing one of the pagination button in p:dataTable ?
Thanks
If you need an ajax behaviour when user changes the page, you can use the following code:
<p:dataTable value="#{bean.collection}" var="obj" >
<p:ajax event="page" update="componentsToUpdateOnPage" listener="#{bean.pageListener}" />
<p:column>
.. etc..
</p:dataTable>
If you are using a lazy loading data table, you have to override the load() method of LazyDataModel. that method is executed on page load, when page changes and also when you sort or filter the datatable.
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.