[英]PrimeFaces dataTable pagination and javascript
我正在使用PrimeFaces 6.1,正在处理这样的表
<p:dataTable
id="listingsTable"
value="#{listingsController.listingsLazyDataModel}"
var="actualAd"
paginator="true"
rows="20"
lazy="true"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
rowsPerPageTemplate="10,20,30"
paginatorPosition="bottom"
widgetVar="listingsTableDesktop">
<p:ajax event="page" listener="#{listingsController.pageChanged}" oncomplete="pageChangedOnDetails(PF('listingsTableDesktop'))" />
</p:dataTable>
和JavaScript是以下
function pageChangedOnDetails(listingsTableDesktop) {
console.log("paginaDestinazione1="+listingsTableDesktop.paginator.getCurrentPage());
console.log("paginaDestinazione2="+listingsTableDesktop.paginator.currentReport[0].innerText);
}
问题是pageChangedOnDetails函数内的所有两行代码总是返回用户在页面事件之前所在的页面。
似乎是在更新dom之前调用了“ onComplete”。
这是预期的行为吗? 难道我做错了什么?
是的,您的oncomplete
函数在数据表分页器oncomplete
函数之前被调用。 所有客户端回调(完成,成功,错误)都是如此。
您可以看一下primefaces core.ajax.js
源代码:
complete: function(xhr, status) {
// this is your callback
if(cfg.oncomplete) {
cfg.oncomplete.call(this, xhr, status, xhr.pfArgs);
}
// this is the extension callback (datatable)
if(cfg.ext && cfg.ext.oncomplete) {
cfg.ext.oncomplete.call(this, xhr, status, xhr.pfArgs);
}
https://github.com/primefaces/primefaces/blob/6c1b2bf1e7a3db568ba2b4ea21b211fc605c052b/src/main/resources/META-INF/resources/primefaces/core/core.ajax.js (第572行)-这是6.1源代码,而不是6.1源代码当前的主人。
您可能会抓住调用者,然后尝试自己调用ext.oncomplete
或完全扩展该完整功能,但最终可能会遇到麻烦。
相反,如果您需要更新任何组件或执行任何javascript代码,我建议使用ajax侦听器方法( pageChanged
)获取当前页面并使用RequestContext。
https://www.primefaces.org/showcase/ui/misc/requestContext.xhtml
编辑:使用请求上下文,您可以从pageChanged
侦听器获取新页面,然后将此新页面发送到javascript函数( processNewPage
):
public void onPageChanged(PageEvent pageEvent) {
int newPage = pageEvent.getPage();
RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.execute("processNewPage(" + newPage + ")");
}
还值得注意的是,从6.0.10开始,datatable组件在页面之间保持其状态: https : //www.primefaces.org/showcase/ui/data/datatable/tableState.xhtml
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.