(JSF 2.0) Problems with primefaces dataTable component.
Question
I want to make a simple datatable just with the pagination feature, but i have 2 problems:
1- The data is displayed but the paginator is not shown in the browser(I tried IE and chrome)
<p:dataTable var="garbage" value="#{resultsController.allGarbage}" paginator="true" rows="10">
<p:column>
<f:facet name="header">
<h:outputText value="Filename" />
</f:facet>
<h:outputText value="#{garbage.filename}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Description" />
</f:facet>
<h:outputText value="#{garbage.description}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Upload date" />
</f:facet>
<h:outputText value="#{garbage.uploadDate}" />
</p:column>
</p:dataTable>
2- In google chrome paginator still is not displayed and also i see some extrange dialog every time i refresh:
Does this mean that primefaces is not compatible with chrome?
------------------------UPDATE 1------------------------------
This is how it looks the hold page:
<ui:composition template="WEB-INF/templates/BasicTemplate.xhtml">
<ui:define name="resultsForm">
<h:form enctype="multipart/form-data">
<h:inputText id="search" value="" /><h:commandButton value="search"/>
<h:selectOneRadio id="searchFilter" value="" >
<f:selectItem id="r1" itemLabel="text documents(.pdf, .docx ...)" />
<f:selectItem id="r2" itemLabel="audio(.mp3,.wav...)" />
<f:selectItem id="r3" itemLabel="multimedia(.mpeg,flv...)" />
<f:selectItem id="r4" itemLabel="other..." />
</h:selectOneRadio>
<p:dataTable var="garbage" value="#{resultsController.allGarbage}" paginator="true" rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15">
<p:column>
<f:facet name="header">
<h:outputText value="Filename" />
</f:facet>
<h:outputText value="#{garbage.filename}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Description" />
</f:facet>
<h:outputText value="#{garbage.description}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Upload date" />
</f:facet>
<h:outputText value="#{garbage.uploadDate}" />
</p:column>
</p:dataTable>
</h:form>
</ui:define>
------------------------UPDATE 2------------------------------
This image is how the component is displayed in chrome and how the chrome consoles displays an error:
2 answers
solution1
2 ACCPTED 2011-03-28 12:47:48
If you don't see any PrimeFaces specific CSS/JS imports in generated HTML <head> (rightclick page in browser, choose View Source , then it means that you need to replace the HTML <head> in your template by JSF <h:head> . That's namely where all resource dependencies (CSS/JS/images/etc which are connected to JSF components/libraries) will end up in.
In former PrimeFaces versions (at least in 2.0) you would also need to configure a resource servlet to that PrimeFaces can serve them up from the JAR file:
<servlet>
<servlet-name>Resource Servlet</servlet-name>
<servlet-class>org.primefaces.resource.ResourceServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Resource Servlet</servlet-name>
<url-pattern>/primefaces_resource/*</url-pattern>
</servlet-mapping>
I'm however not sure about the newer PrimeFaces versions beyond 2.0, also currently the user manual is for some reason not free anymore.
solution2
1 2011-03-28 11:41:22
From the JS error it seems that the PrimeFaces javascript libraries are not correctly included.
I had the same issue with mojarra ("mojarra is not defined" in js console). It seems that for some reason the js libs are not included (should be done by the server). Sometimes they are, sometimes not (never found out the reason).
If anyone reading this has an idea, I would be thankful for any hint.
For mojarre my workaround was to include mojarra's js lib manually.
Regarding to your problem, try the same for Primefaces.
In my project there is a page that uses p:dataTable and pagination. The following js files are included (plus some others; shown in source of html output):
<script type="text/javascript" src="/register/primefaces_resource/2.1/yui/datasource/datasource-min.js"></script>
<script type="text/javascript" src="/register/primefaces_resource/2.1/primefaces/paginator/paginator.js"></script>
<script type="text/javascript" src="/register/primefaces_resource/2.1/yui/datatable/datatable-min.js"></script>
<script type="text/javascript" src="/register/primefaces_resource/2.1/primefaces/datatable/datatable.js"></script>
<script type="text/javascript" src="/register/primefaces_resource/2.1/yui/swf/swf-min.js"></script>
<script type="text/javascript" src="/register/primefaces_resource/2.1/yui/charts/charts-min.js"></script>
<script type="text/javascript" src="/register/primefaces_resource/2.1/primefaces/charts/charts.js"></script>
Look in your html ouput and check if the pagination-related js files are included. If not, include them manually. Note that /register in the src attributes is my context path. Replace it with your context path.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.