primefaces 4 datatable pager works only after first ajax update - primefaces

i have an primefaces 4 datatable, when loading the page the paginator isn't working.. when i click the button nothing happens. But the first data is shown. Wehn i now sort/filter the table once the paginator starts to work.
<p:dataTable var="user" value="#{proxyUserListHandler.lazyModel}" paginator="true" rows="10" paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" rowsPerPageTemplate="10,50,100,200,500" lazy="true">
<p:column headerText="Id" sortBy="id" filterBy="#{user.id}">
<h:outputText value="#{user.id}" />
</p:column>
<p:column headerText="Username" sortBy="username" filterBy="#{user.username}">
<h:outputText value="#{user.username}" />
</p:column>
<p:column headerText="apiKey" sortBy="apiKey" filterBy="#{user.apiKey}">
<h:outputText value="#{user.apiKey}" />
</p:column>
</p:dataTable>

the problem was
<p:dataTable value="#{listHandler.lazyModel}"
the function always returned a new LazyModel...somehow the function is called twice and only at the first object the "load" function was called.

You probably have another error on the page that you are not noticing (and quite likely is not being reported!)
Try to reduce the page functionality to the bare min in order to get the data table to react properly, then add the other page components back in until the datatable bahavior is impacted again.

Related

How to detect row selection in Primefaces Datatable?

I use Prime Faces 6.2 to construct checkboxed column. Have this sample:
<p:dataTable id="List"
value="#{tickets}"
lazy="true"
paginator="true"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
currentPageReportTemplate="{startRecord}-{endRecord} из {totalRecords}"
rows="20"
rowKey="#{ticket.id}"
selection="#{ticketForm.abstractMTSBUExportTickets}"
var="ticket"
emptyMessage="Записи в данной категории отсутствуют">
<p:column selectionMode="multiple" style="width:40px; text-align:center">
<!-- <p:ajax event="click" listener="#{form.abstractMTSBUExportTickets}" /> --> // first try
<!-- <p:commandLink id="select" action="doSome" /> --> // second try
</p:column>
The purpose to use ajax is for making some button on page visible when at least one checkbox selected.
Firstly, I tried to insert p:ajax tag into column tag but got exception:
<p:ajax> Unable to attach behavior to non-ClientBehaviorHolder parent
More obviouse way was to insert command link into but it simply did nothing.
So, is there any practice to do this? Thanks for answers in advance.
Yes you are close but what you what is Ajax on the Datatable and not on the checkboxes. PF provides these two Ajax events on the datatable for being notified or boxes being checked or unchecked...
<p:datatable>
<p:ajax event="rowSelect" listener="#{dtSelectionView.onRowSelect}" update=":form:mybutton" />
<p:ajax event="rowUnselect" listener="#{dtSelectionView.onRowUnselect}" update=":form:mybutton" />
...
</p:datatable>
See the Select Events example from the Showcase for more info: https://www.primefaces.org/showcase/ui/data/datatable/selection.xhtml
You can simply do something like in the Select and Unselect methods will trigger updating your selection and you can enable the button using EL expression like...
<p:commandButton id="mybutton" disabled="#{ticketForm.abstractMTSBUExportTickets.size > 0}" />

primefaces datatable is showing blank rows. Showing the same number of rows as the records in backed list

Thanks to all those who are responding to the problems of the developers.
I am facing some issue with primefaces 5.0 in datatable.
i am having one datatable with 14 records into that backed by list as usual. It was working fine till the time i added spring into my JSF application.
list backed in datatable is getting data from database though one method which is setting the values into the list(not filling data in getter method).
now when i am checking in getter of the list, it is having 14 records into the list. The problem is datatable is not showing the values for those records. It is showing blank rows for that. It is showing 14 blank records for that.
if i am trying to print the value of the records of list it is printing fine.
i tried to see the type of the records of the list that is also the desired type.
if i will try to print the perticular value of the field of the record of the list outside of the datatable that is also printing fine in xhtml page but it is not showing the same into the datatable.
i didn't change any sysntex as it was working fine before adding spring into it.
please help me for this. Thanks to all of you. I am showing the xhtml code below.
<p:dataTable id="datatable" var="variable" value="#{myClass.existingRecordList}" resizableColumns="true"
paginator="true" rows="10" editable="true" style="font-size:12px" paginatorAlwaysVisible="true"
paginatorPosition="top" rowIndexVar="rowIndex" rowsPerPageTemplate="5,10,15,20"
paginatorTemplate="Displaying {RowsPerPageDropdown} records / page {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {CurrentPageReport}"
currentPageReportTemplate="{startRecord} - {endRecord} of {totalRecords}" >
<p:columnGroup type="header" >
<p:row>
<p:column headerText="#" style="text-align:center;white-space:normal;width:25px"/>
<p:column headerText="Field1" style="text-align:center;white-space:normal;width:50px;vertical-align:bottom"
sortBy="#{variable.field1}" filterBy="#{variable.field1}" filterMatchMode="contains" rendered="#{otherClass.field1}" />
<p:column headerText="Field2" style="text-align:center;white-space:normal;width:50px;vertical-align:bottom"
sortBy="#{variable.field2}" filterBy="#{variable.field2}" filterMatchMode="contains" rendered="#{otherClass.field2}"/>
<p:column headerText="Field3" style="text-align:center;white-space:normal;width:50px;vertical-align:bottom"
sortBy="#{variable.field3}" filterBy="#{variable.field3}" filterMatchMode="contains" rendered="#{otherClass.field3}"/>
</p:row>
</p:columnGroup>
<p:column headerText="#" style="text-align:center;white-space:normal;width:20px" exportable="false">
<h:outputText value="#{rowIndex+1}" style="text-align:center"/> <!-- This is printing the value -->
</p:column>
<p:column headerText="Field1" style="text-align:center;" rendered="#{otherClass.field1}">
<h:outputText value="#{variable.field1}" style="text-align:center;white-space:normal"/><!-- This is not printing the value showing blank-->
</p:column>
<p:column headerText="Field2" style="text-align:center;" rendered="#{otherClass.field2}">
<h:outputText value="#{variable.field2}"/> <!-- This is not printing the value showing blank-->
</p:column>
<p:column headerText="Field3" style="text-align:center;" rendered="#{otherClass.field3}">
<h:outputText value="#{variable.field3}"/> <!-- This is not printing the value showing blank-->
</p:column>
</p:dataTable>
<h:outputText value="This is the value #{myClass.existingRecordList.get(0).field1}"></h:outputText> <!-- This is printing the value -->

How to simplify sorting in Primefaces p:dataTable component. Unexpected sorting icons founded

I want to incorporate simple sorting to datatable in Primefaces.
My code is:
<p:dataTable id="tbl" var="data" value="#{dataView.avaliableData}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
paginator="true" rows="10" sortMode="simple" paginatorPosition="bottom">
<p:column headerText="#{msg.id}" sortBy="#{data.id}">
<h:outputText value="#{data.id}" />
</p:column>
<p:column headerText="#{msg.name}" sortBy="#{data.name}">
<h:outputText value="#{data.name}" />
</p:column>
<p:column headerText="#{msg.entity}" sortBy="#{data.entity}">
<h:outputText value="#{data.entity}" />
</p:column>
<p:column headerText="#{msg.date}" sortBy="#{data.date}">
<h:outputText value="#{data.date}" />
</p:column>
</p:dataTable>
But the result is so confusing. This picture illustrates it (I don't have enough reputation to post it here directly).
Click here for viewing the datatable anomaly example
Why do I see several sorting items? I just want to see only an icon which sorts in ascending or descending order.
You just remove sortMode = "simple" and you will see only one sort icon and to show the paginator only it exceeds the number of rows use this.
paginatorAlwaysVisible="false"
in dataTable tag.
Apparently it was caused by the misapplication of the stylesheet incorporating background icon.
I gather that it was due to the version of Primefaces. I have overwritten the
.ui.datatable .ui-sortable-column-icon
entry in my stylesheet and the strange icons has disappeared.

Primefaces dataTable filter works only once

im using Primefaces 3.5 to create a dataTable with filters.
<h:form id="table">
<div class="showRuleStyle">
<p:dataTable id="RuleTable" var="e" value="#{ruleListBean.rules}" filteredValue="#{ruleListBean.filteredRules}" styleClass="ruleTable" paginator="true" paginatorPosition="bottom" rows="15" emptyMessage="Keine Einträge gefunden.">
<p:column id="companyColumn" headerText="Name" filterBy="#{e.name}" filterOptions="#{ruleListBean.filterNameOptions}" >
<h:outputText value="#{e.name}"></h:outputText>
</p:column>
...
<p:column>
<f:facet name="header"></f:facet>
<h:commandButton id="DeleteRuleButton" value="Löschen" styleClass="buttondefault" action="#{ruleListBean.removeRule(e)}" update=":table"></h:commandButton>
</p:column>
</p:dataTable>
</div>
</h:form>
Now, i get the table as intended and can choose an filter which updates the table. But now, if i try to choose a different filter or select the empty filter, nothing happens. If I click the button, it works again, which i think is because of the update of the form.
I tried to add
<p:ajax event="filter" update=":table">
and other events, but it won't work.
Any suggestions?
Greets
Alex
What is the scope of the ruleListBean? I've tried your code and it worked as expected (without the p:ajax).
My ruleListBean is in view scope.
It is suggested to use a scope longer than request like viewscope to
keep the filteredValue so that filtered list is still accessible after
filtering. (PrimeFaces User’s Guide pg. 135)
NOTE: Change h:commandButton to p:commandButton so that you can use the update feature.

Bug when editing date field in DataTable component

I've got a weird bug when editing a date field using a Calendar component inside of an editable DataTable. To explain, I'm going to need to show you some pictures.
First, here is the actual page I'm working from:
Now, let's change date 1 in the list to the 13th of February and click OK.
As you can see, the table changes, but the row takes on another row's data.
Other than in the GUI, the update's gone just fine, and if we reload the page the date has been updated in the database. This is what the table looks like after the page has been refreshed:
I've turned the code inside and out trying to get at this bug, and I'm starting to wonder if it's a bug in PrimeFaces itself. I've stepped through the entire workflow and have concluded that the backing ArrayList has the correct values at all times. I was thinking it may have had something to do with me sorting the list both when fetching it from the database and using the sortBy attribute of the DataTable. After disabling both however, the bug continues to manifest itself.
Here's my code for the page. Can anyone see anything I've done wrong? If so, you're my hero =)
<ui:composition template="/WEB-INF/standard-page-template.xhtml">
<ui:define name="title">Change Dates</ui:define>
<ui:define name="content">
<p:panel header="Change dates" style="width:760px">
<h:form>
<p:panel>
Just the search stuff here...
</p:panel>
<p:panel header="Search">
<h:panelGrid columns="1">
<p:dataTable id="listDatesTable" value="#{view.dateWrappers}" var="wrapper"
rowIndexVar="index" editable="true"
emptyMessage="Search for an ID above">
<p:ajax event="rowEdit" listener="#{changePublishDateView.changeDate}"/>
<p:column headerText="Dragning" width="90">
<h:outputText value="#{wrapper.id}"/>
</p:column>
<p:column headerText="Beskrivning" width="180">
<h:outputText value="#{wrapper.description}"/>
</p:column>
<p:column headerText="Distribution" width="100">
<h:outputText value="#{wrapper.id2}"/>
</p:column>
<p:column headerText="Publiceringstid" width="170" styleClass="#{view.duplicateDateInRow(wrapper)}">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{wrapper.newhDate}">
<f:convertDateTime pattern="yyyy-MM-dd HH:mm"/>
</h:outputText>
</f:facet>
<f:facet name="input">
<p:calendar
mindate="#{view.minDate}" stepMinute="30" minHour="8" maxHour="22"
pattern="yyyy-MM-dd HH:mm" value="#{wrapper.newDate}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column width="50">
<p:rowEditor/>
</p:column>
</p:dataTable>
</h:panelGrid>
</p:panel>
</h:form>
</p:panel>
</ui:define>
As it turns out, this bug was due to the data in the individual rows being mostly identical.
Solution: Set a rowKey attribute on the datatable, to the date field. Now it works fine with or without sorting.
http://www.developer.am/primefaces/?page=RowKey