Question

我正在使用 Primefaces 6.1 ， JSF 2.2 构建单页应用程序，并在 Wildfly 上运行它，该选项可以搜索用户。初始视图仅呈现具有各种过滤器的搜索面板，并且在单击搜索时，将查询用户表并返回数据集，然后在包含datatable的视图中呈现块。下面是搜索用户的延迟加载代码。

public void getUsers(ActionEvent event) {
    //few lines to get filterData
    this.lazyUsers = new LazyDataModel<UserModel>() {
        private static final long serialVersionUID = 1L;
        @Override
        public List<UserModel> load(int first, int pageSize, String sortField, SortOrder sortOrder,
                        Map<String, Object> filters) {

            filterObject.setStartCount(new Long(first));
            filterObject.setCountPerPage(new Long(pageSize));
            List<UserModel> list = userService.getUsers(filterObject);
            if (list != null)
                this.setRowCount(list.get(0).getTotalNumberOfRecords().intValue());
            RequestContext context = RequestContext.getCurrentInstance(); 
            if(context!=null)
                context.addCallbackParam("totalRecords", this.getRowCount());
            return list;
        }
    };
}

这是我的表格视图。

<p:outputPanel id="users" autoUpdate="true">
    <p:outputPanel rendered="#{users.displayusers}">
        <h5 class="title">
            <h:outputText value="#{msg.header_title}"></h:outputText>
        </h5>
        <p:dataTable id="userTable" lazy="true" paginator="true"
            rows="2"
            emptyMessage="#{msg.emtpymsg}"
            paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
            rowsPerPageTemplate="2,4,5"
            rendered="#{null != users.lazyUsers &amp;&amp; not empty users.lazyUsers }"
            value="#{users.lazyUsers}" var="user"
            rowIndexVar="userRow">
            <p:column headerText="#{msg.Name}">
                <h:outputLabel class="tdRow" value="#{user.name}" />
            </p:column>
            <p:column headerText="#{msg.Phone}">
                <h:outputLabel class="tdRow" value="#{user.phone}" />
            </p:commandLink>
            </p:column>
            <p:column headerText="#{msg.Address}">
                <h:outputLabel class="tdRow" value="#{user.address}" />
            </p:column>
            <p:column headerText="#{msg.Email}">
                <h:outputLabel class="tdRow" value="#{user.email}" />
            </p:column>
        </p:dataTable>
    </p:outputPanel>
</p:outputPanel>

当搜索发生时，所有内容都呈现，但是当我对其进行分页时，它会搜索下一页数据，并获取下一页数据，但它会将其呈现为删除数据表的纯HTML。在检查html时，我只能看到tr，td作为网络选项卡中服务器的响应，只有其中的内容直接呈现到div。数据表未保留。谁能让我知道这里发生了什么。

我还尝试在datatable中捕获页面事件，并将update值添加为

<p:ajax event="page" update="userContainer:userTable"></p:ajax>

但又没有帮助。希望能找到一些帮助。

更新

我注意到，对于通过datatables进行的任何 ajax 操作都会发生这种情况，比如，过滤，排序，rowsperpage 更改等等。有没有办法识别究竟该怎么了？

Answer 1

您更改了rendered属性的值。尝试将dataTable封装到另一个组件中，然后重新渲染此外部组件。

如果您在模板中放置一个虚拟表，也总是呈现，EG：

也会有所帮助

<p:dataTable disabled="true" />

这将确保首次加载页面时加载所有dataTable所需的库...

Answer 2

这个问题的解决方案非常简单。

我必须保留<p:ajax event="page" update="userContainer:userTable"></p:ajax>而不是更新，我必须使用流程以及ignoreAutoUpdate="true"

<p:ajax event="page" ignoreAutoUpdate="true" process="userContainer:userTable"></p:ajax>

解决了这个问题。希望这对将来的人有用。

Primefaces Lazyloading在分页时将行呈现为html

2 个答案: