is that I have uploaded my DataTable with data from BD, but what I need is to put the row number of the loaded data in my Grid.
<p:dataTable id="dataTable" var="rol" value="#{mantRolMB.roles}"
paginator="true" rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks}
{NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15" rowKey="#{item}" >
<p:column>
<f:facet name="header">
<h:outputText value="N°" />
</f:facet>
<h:outputText value="#{item}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Nombre Corto" />
</f:facet>
<h:outputText value="#{rol.nbNomCorto}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Nombre Largo" />
</f:facet>
<h:outputText value="#{rol.nbNomLargo}" />
</p:column>
</p:dataTable>
Please help to load a item number.
You can define rowIndexVar="rowIndex" and then use it like this: <h:outputText value="#{rowIndex}" />
Related
I want my table headers to have the first value of my dataTable.
I know I can change the value of the headerText but for my project I need the header to change according to the values being output.
So from the picture I want 'col1' to be replace by 'jour', 'col2' by 'lundi', 'col3' by 'mardi', etc
<p:dataTable resizableColumns="true" liveResize="true" stripedRows="true" size="large" id="a" var="test"
value="#{testMB1.testlist}" style="padding:20px;" rows="15" paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
currentPageReportTemplate="{startRecord}-{endRecord} of {totalRecords} records"
rowsPerPageTemplate="3,5,10,15,25, 50, 100, 250, 500" rowKey="#{test.id}" scrollable="true" update="mainForm:a"
frozenRows="1">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<p:inputText filterBy="#{test.id}" id="globalFilter" onkeyup="PF('test').filter()" placeholder="Enter keyword"
filterMatchMode="contains" style="width:200px;height:25px;align:right;" />
</p:outputPanel>
</f:facet>
<p:column headerText="Id" sortBy="#{test.id}">
<h:outputText value="#{test.id}" />
</p:column>
<p:column headerText="col1" sortBy="#{test.col1}" filterMatchMode="contains" filterBy="#{test.col1}"
onkeyup="PF('test').filter()">
<h:outputText value="#{test.col1}" />
</p:column>
<p:column headerText="col2" sortBy="#{test.col2}" filterMatchMode="contains" filterBy="#{test.col2}"
onkeyup="PF('test').filter()">
<h:outputText value="#{test.col2}" />
</p:column>
<p:column headerText="col3" sortBy="#{test.col3}" filterMatchMode="contains" filterBy="#{test.col3}"
onkeyup="PF('test').filter()">
<h:outputText value="#{test.col3}" />
</p:column>
<p:column headerText="col4" sortBy="#{test.col4}" filterMatchMode="contains" filterBy="#{test.col4}"
onkeyup="PF('test').filter()">
<h:outputText value="#{test.col4}" />
</p:column>
<p:column headerText="col5" sortBy="#{test.col5}" filterMatchMode="contains" filterBy="#{test.col5}"
onkeyup="PF('test').filter()">
<h:outputText value="#{test.col5}" />
</p:column>
<p:column headerText="col6" sortBy="#{test.col6}" filterMatchMode="contains" filterBy="#{test.col6}"
onkeyup="PF('test').filter()">
<h:outputText value="#{test.col6}" />
</p:column>
<p:column headerText="col7" sortBy="#{test.col7}" filterMatchMode="contains" filterBy="#{test.col7}"
onkeyup="PF('test').filter()">
<h:outputText value="#{test.col7}" />
</p:column>
<p:column headerText="col8" sortBy="#{test.col8}" filterMatchMode="contains" filterBy="#{test.col8}"
onkeyup="PF('test').filter()">
<h:outputText value="#{test.col8}" />
</p:column>
<p:column headerText="col9" sortBy="#{test.col9}" filterMatchMode="contains" filterBy="#{test.col9}"
onkeyup="PF('test').filter()">
<h:outputText value="#{test.col9}" />
</p:column>
<p:column headerText="col10" sortBy="#{test.col10}" filterMatchMode="contains" filterBy="#{test.col10}"
onkeyup="PF('test').filter()">
<h:outputText value="#{test.col10}" />
</p:column>
</p:dataTable>
My dataTable
Replace all headerText with the code below (according to your mapping object). In the bean, don't forget to verify your list against null, in order not to get a NullPointerException.
<p:column headerText="#{testMB1.testlist.get(0).id}">
Technically speaking a better approach will be to create in the bean a final list, with the columns headers, and call it in the headerText.
If the headers are dynamic, you can use dynamic columns, as suggested by Jasper de Vries
i have a realy strange behavior if i place components inside a datatable header.
Code for the Table
<p:dataTable id="groupTable" var="group" value="#{profile.user.groups}"
widgetVar="groupTable" rows="10" paginator="true"
paginatorPosition="bottom"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,20,40,80"
emptyMessage="Keine Einträge mit den gewünschten Kriterien gefunden"
filteredValue="#{groupView.filteredGroups}" sortMode="multiple"
resizableColumns="true" liveResize="true">
<f:facet name="header">
<h:outputText value="Zugeordnete Gruppen" />
<p:outputPanel style="float:left;">
<p:inputText id="globalFilter" onkeyup="PF('groupTable').filter()" style="width:150px;" placeholder="Suche"/>
</p:outputPanel>
</f:facet>
<p:column headerText="Gruppenname" filterBy="#{group.name}"
sortBy="#{group.name}" filterMatchMode="contains"
filterStyle="display:none" style="width:150px">
<h:outputText value="#{group.name}"/>
</p:column>
<p:column headerText="Beschreibung" filterBy="#{group.beschreibung}"
sortBy="#{group.beschreibung}" filterMatchMode="contains"
filterStyle="display:none">
<h:outputText value="#{group.beschreibung}"/>
</p:column>
</p:dataTable>
you can find the generated HTML here jsfiddle
On the Page itself it looks like this:
So what is the problem with the code? why does the serach box destroy the table layout?
Okay i found it. Maybe it will help someday another facing the same Problem.
The Searchbox is to big in line with the Text. If i change the inputtext size and set the outputpanel inline it looks like it was intended.
<f:facet name="header">
<h:outputText value="Zugeordnete Gruppen" />
<p:outputPanel style="display:inline">
<p:inputText id="globalFilter" onkeyup="PF('groupTable').filter()" style="width:150px;height:10px;float:left" placeholder="Suche"/>
</p:outputPanel>
</f:facet>
I would like to show different items of a list in my dataTable
I tried ui:repeat but it's seems not working
I have an object Demande(Classe demande) it has a list of Choix and I want to show for all demandes the choice and the periode(Classe Periode) of each choice(classe Choix)
<p:dataTable id="estivage" var="it" emptyMessage="Aucune demande !"
value="#{demandeController.allDemandes}" paginator="false" style="width: 800px"
rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15">
<f:facet name="header">
Liste des Demandes pour la periode d'éstivage
</f:facet>
<p:column style="text-align:center" sortBy="#{it.utilisateur.nom}">
<f:facet name="header">
<h:outputText value="Adherent" />
</f:facet>
<h:outputText value="#{it.utilisateur.nom}" />
<h:outputText value=" " />
<h:outputText value="#{it.utilisateur.prenom}" />
</p:column>
<p:column style="text-align:center" sortBy="#{it.dateDemande}">
<f:facet name="header">
<h:outputText value="Date de la demande" />
</f:facet>
<h:outputText value="#{it.dateDemande}">
<f:convertDateTime pattern="dd/MM/yyyy 'à' HH:mm:ss" />
</h:outputText>
</p:column>
<ui:repeat var="item" value="#{it.listChoix}">
<p:column style="text-align:center">
<f:facet name="header">
<h:outputText value="chalet " />
</f:facet>
<h:outputText value="#{item.chaletChoisi}" />
</p:column>
<p:column style="text-align:center">
<f:facet name="header">
<h:outputText value="periode " />
</f:facet>
<h:outputText value="#{item.periode.libelle}" />
</p:column>
</ui:repeat>
<p:column style="text-align:center">
<f:facet name="header">
<h:outputText value="Mode paiement" />
</f:facet>
<h:outputText value="#{it.modePaiement}">
</h:outputText>
</p:column>
</p:dataTable>
any help please
You have <p:column> in your ui:repeat. It doesn't work well. You could try SubTable from Primefaces.
See example from Primefaces Showcase:
http://www.primefaces.org/showcase/ui/datatableSubTable.jsf
The list of Choix for every Demandesyou can show then in SubTable.
Another possibility is if you use nested DataTables. Use a p:column of "estivage" table and define inside that column another datatable that shows the list of Choix.
<p:dataTable id="estivage" var="it">
<p:column header="choice and periode">
<p:dataTable var="item" value="#{it.listChoix}">
<p:column style="text-align:center">
<f:facet name="header">
<h:outputText value="chalet " />
</f:facet>
<h:outputText value="#{item.chaletChoisi}" />
</p:column>
<p:column style="text-align:center">
<f:facet name="header">
<h:outputText value="periode " />
</f:facet>
<h:outputText value="#{item.periode.libelle}" />
</p:column>
</p:dataTable>
</p:column>
</p:dataTable>
I'm using PrimeFaces 3.5, with a datatable that i need use a FilterBy component.
In show case, it works ok: http://www.primefaces.org/showcase/ui/datatableFiltering.jsf
well, when i do my first filter, its work and it show me result, but when i do a second filter, it stop working.
See my xHTML:
<p:dataTable id="users"
var="user"
value="#{userMB.users}"
rowKey="#{user.id}"
selection="#{userMB.userSelected}"
selectionMode="single"
rows="10"
paginator="true"
filteredValue="#{userMB.filteredUser}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
>
<p:column headerText="Id" >
#{user.id}
</p:column>
<p:column headerText="Login" filterBy="#{user.login}">
#{user.login}
</p:column>
</p:dataTable>
Observations: userMB its my managed bean, #SessionScoped
users it's a List
filteredUser it's a List
it's all... thank a attention :)
I am new here too, but this example worked for me.
I see some problems in your example.
First if you put var="user" then rowKey="#{userMB.id}" must be rowKey="#{user.id}"
Same here:
As you see I removed filterValue="#{usuario.login}" as I don't used this.
In the end this should look like this:
<p:dataTable id="users"
var="user"
value="#{userMB.users}"
rowKey="#{user.id}"
selection="#{userMB.userSelected}"
selectionMode="single"
rows="10"
paginator="true"
filteredValue="#{userMB.filteredUser}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
>
<p:column headerText="Id" >
#{user.id}
</p:column>
<p:column headerText="Login" sortBy="#{user.login}" filterBy="#{user.login}">
#{user.login}
</p:column>
</p:dataTable>
Maybe its not problem, but I used #ViewScoped.
Hint: you can be interested in filterMatchMode="contains"
I hope I helped you.
this is a working PF3.5 datatable dont forget to wrap it inside an
<p:dataTable id="surveyTable" var="survey" value="#{surveyBean.surveys}" widgetVar="surveysTable"
emptyMessage="Keine Umfragen zu diesem Suchbegriff vorhanden" filteredValue="#{surveyBean.filteredSurveys}"
paginator="true" rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15">
<f:facet name="header">
Liste der Umfragen
<p:outputPanel>
<h:outputText value="Suchen:" />
<p:inputText id="globalFilter" onkeyup="surveysTable.filter()" style="margin-left:5px;width:150px" />
</p:outputPanel>
</f:facet>
<p:column id="idColumn" headerText="ID" filterBy="{survey.id}" filterMatchMode="contains">
<h:outputText value="#{survey.id}" />
</p:column>
<p:column id="titleColumn" filterBy="#{survey.title}" headerText="Bezeichnung" filterMatchMode="contains">
<h:outputText value="#{survey.title}" />
</p:column>
<p:column id="activeColumn" headerText="Aktiv" filterBy="#{survey.active}" filterOptions="#{surveyBean.surveyOptions}"
filterMatchMode="exact">
<h:outputText value="#{survey.active}" />
</p:column>
<p:column id="toggleColumn">
<p:rowToggler />
</p:column>
<p:rowExpansion>
<h:panelGrid id="display" columns="2" cellpadding="4" style="width:300px;"
styleClass=" ui-widget-content grid">
<f:facet name="header">
Details der Umfrage
</f:facet>
<h:outputText value="Bezeichnung:" />
<h:outputText id="model" value="#{survey.title}" />
<h:outputText value="Status:" />
<h:outputText id="year" value="#{survey.active}" />
<h:outputText value="ID:" />
<h:outputText value="#{survey.id}"/>
</h:panelGrid>
</p:rowExpansion>
</p:dataTable>
I want to use two f:facets: the first row one as a 'header' for the table containing only text, and the second row containing a 'global filter' (label + inputbox).
I have tried countless combinations but failed.
How can I achieve this with JSF/Primefaces?
Here is one example of what I tried:
<p:dataTable var="customer" widgetVar="customerTable" id="dataTable" value="#{customerbean.customerList}" paginator="true" rows="20" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rowsPerPageTemplate="10,20,50,100" emptyMessage="#{text['table.customer.filter.notfound']}" filteredValue="#{customerbean.filteredCustomers}" editable="true">
<f:facet name="header">
<h:outputText value="#{text['table.customer.header']}" />
</f:facet>
<f:facet name="header2">
<h:outputText value="#{text['table.customer.filter.global']}" />
<p:inputText id="globalFilter" onkeyup="customerTable.filter()" style="width:150px" />
This is my second attempt based on the answer below:
<f:facet name="header">
<p:columnGroup type="header">
<p:row>
<p:column colspan="4">
<h:outputText value="#{text['table.customer.header']}" />
</p:column>
</p:row>
<p:separator/>
<p:row>
<p:column colspan="4">
<h:outputText value="#{text['table.customer.filter.global']}" />
<p:inputText id="globalFilter" onkeyup="customerTable.filter()" style="width:150px" />
</p:column>
</p:row>
</p:columnGroup>
</f:facet>
Whole datatable:
<p:dataTable id="customersTable" var="customer" widgetVar="customerTable" value="#{customerbean.customerList}" paginator="true" rows="20" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rowsPerPageTemplate="10,20,50,100" emptyMessage="#{text['table.customer.filter.notfound']}" filteredValue="#{customerbean.filteredCustomers}" editable="true" draggableColumns="true" rowKey="#{customer.id}" selection="#{customerbean.selectedCustomer}" selectionMode="single">
<f:facet name="header">
<p:columnGroup type="header">
<p:row>
<p:column colspan="4">
<h:outputText value="#{text['table.customer.header']}" />
</p:column>
</p:row>
<p:separator/>
<p:row>
<p:column colspan="4">
<h:outputText value="#{text['table.customer.filter.global']}" />
<p:inputText id="globalFilter" onkeyup="customerTable.filter()" style="width:150px" />
</p:column>
</p:row>
</p:columnGroup>
</f:facet>
<p:ajax event="rowEdit" listener="#{customerbean.onEdit}" update="#this"/>
<p:column headerText="Name" sortBy="#{customer.name}" filterBy="#{customer.name}" filterMatchMode="contains">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{customer.name}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{customer.name}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="CPR" sortBy="#{customer.cpr}" filterBy="#{customer.cpr}" filterMatchMode="contains">
<h:outputText value="#{customer.cpr}" />
</p:column>
<p:column headerText="Passport No." sortBy="#{customer.passportno}" filterBy="#{customer.passportno}" filterMatchMode="contains">
<h:outputText value="#{customer.passportno}" />
</p:column>
<p:column headerText="DOB" sortBy="#{customer.dob}" filterBy="#{customer.dob}" filterMatchMode="contains">
<h:outputText value="#{customer.dob}" />
</p:column>
<p:column headerText="Options" style="width:50px">
<p:rowEditor />
</p:column>
<f:facet name="footer">
There are #{fn:length(customerbean.customerList)} customers in total.
</f:facet>
</p:dataTable>
You can't name the facet with whatever name you want. It must be something that the datatable understands. It understands "header", just like it understands "footer", but not "header2" or "footer2".
That said, you can use only one <f:facet name="header"> and inside that you can do whatever you want. You may use a <p:panelGrid columns="1">, or a <p:separator>, or even a simple table, it's just html/css formatting, like you would do anywhere in your page.
There's also a more complex way, if you want to try a little bit harder, using <p:columnGroup type="header"> and many <p:row>s inside it, for example:
<p:columnGroup type="header">
<p:row>
<p:column>
<f:facet name="header">
<h:outputText value="Your header" />
</f:facet>
</p:column>
</p:row>
<p:row>
<p:column>
<f:facet name="header">
<h:outputText value="Filter: "/>
<p:inputText value="#{filter}">
</f:facet>
</p:column>
</p:row>
</p:columnGroup>
See a full example here.