为什么 Jquery 数据表不适用于 richfaces <a4j:repeat>？

Question

我使用 JSF2.2 和 Richfaces 4，我尝试使用 Jquery 的 Datatable 创建一个 table。因为我所有的数据都是动态的，所以我也必须使用。但它在 jsf.

中给了我一个空的 table

这是我的 jsf 页面：

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:p="http://java.sun.com/jsf/passthrough"
xmlns:rich="http://richfaces.org/rich">
<h:head>
    <script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css"/>
<script> 
$(document).ready(function() {
    $('#example').dataTable();
} );
</script>
</h:head>
<h:body>
    <h:form>
        <h:panelGroup id="tableau">
            <table id="example" class="display compact" cellspacing="0"
                width="100%">


                <a4j:repeat value="#{auditController.findAllEntityList()}"
                    var="entity" rowKeyVar="rowentity">


                    <thead>
                        <tr>
                            <a4j:repeat
                                value="#{Controller.findP(entity).entrySet().toArray()}"
                                var="entete1">
                                <th><h:outputLabel value="#{entete1.key}"
                                        rendered="#{rowentity eq 0 and  entete1.key !='class'}" /></th>
                            </a4j:repeat>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <a4j:repeat
                                value="#{Controller.findP(entity).entrySet().toArray()}"
                                var="entete">
                                <td><h:outputLabel value="#{entete.value}"/></td>
                            </a4j:repeat>
                            </tr>
                    </tbody>
                </a4j:repeat>

            </table>
        </h:panelGroup>
    </h:form>
</h:body>

没有 Jquery 它工作完美。

Answer 1

我将 <a4j:repeat> 替换为 <ui:repeat> 并且有效 good.So 我的代码如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://java.sun.com/jsf/passthrough"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
    <title>test-test</title>
    <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css" />
    <link rel="stylesheet" type="text/css" href="css/shCore.css" />
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <style type="text/css" class="init">
</style>
    <script type="text/javascript" language="javascript" src="js/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
    <script type="text/javascript" language="javascript" src="js/shCore.js"></script>
    <script type="text/javascript" language="javascript" src="js/demo.js"></script>
    <script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#example').dataTable({
    "bPaginate": true,
    "bFilter": false,
    "bInfo": false,
    "bProcessing" : false,
    "bJQueryUI" : true,
    "sEmptyTable" : "No messages found",
    });} );


</script>
</h:head>
<h:body class="exampleLos">
    <h:form>
    <h:panelGroup id="tableau">
            <table id="example" class="display compact" cellspacing="0" width="100%">
                <ui:repeat var="entity"
                    value="#{Controller.fAllList()}" varStatus="KeyVarSta">
                    <thead>
                        <tr>
                            <ui:repeat
                                value="#{Controller.fPropreties(KeyVarSta.index).entrySet().toArray()}" var="entete1">
                                <th><h:outputLabel value="#{entete1.key}" rendered="#{KeyVarSta.index == 0 and  entete1.key !='class'}" /></th>
                            </ui:repeat>
                            <th><h:outputLabel value="Rev" rendered="#{KeyVarSta.index == 0}" /></th>
                            <th><h:outputLabel value="Rev Date" rendered="#{KeyVarSta.index == 0}" /></th>
                            <th><h:outputLabel value="Rev User" rendered="#{KeyVarSta.index == 0}" /></th>
                            <th><h:outputLabel value="Rev Type" rendered="#{KeyVarSta.index == 0}" /></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <ui:repeat
                                value="#{Controller.fPropreties(KeyVarSta.index).entrySet().toArray()}" var="entete">
                                <td><h:outputLabel value="#{entete.value}"rendered="#{entete.key !='class'}" /></td>
                            </ui:repeat>
                            <td><h:outputLabel
                                    value="#{Controller.findREny(KeyVarSta.index).rev}" /></td>
                            <td><h:outputLabel
                                    value="#{Controller.findREny(KeyVarSta.index).revdate}">
                                </h:outputLabel></td>
                            <td><h:outputLabel
                                    value="#{Controller.findREny(KeyVarSta.index).username}" /></td>
                            <td><h:outputLabel
                                    value="#{Controller.findREnyType(KeyVarSta.index).name()}" /></td>
                        </tr>
                    </tbody>
                </ui:repeat>
            </table>
        </h:panelGroup>
    </h:form>
</h:body>

为什么 Jquery 数据表不适用于 richfaces <a4j:repeat>？

Why the Jquery Datatable doesn't work whith richfaces <a4j:repeat>?

javascript

jquery

jsf

richfaces

datatables