简体   繁体   English

为什么Jquery Datatable无法使用Richfaces工作 <a4j:repeat> ?

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

I work with JSF2.2 and Richfaces 4 and i try to create a table by using the Datatables of Jquery. 我使用JSF2.2和Richfaces 4,我尝试使用Jquery的Datatables创建一个表。 Because all my datas are dynamic so i have to use and the too. 因为我的所有数据都是动态的,所以我必须使用它。 But it gives me an empty table in the jsf. 但它在jsf中给了我一个空表。

this is my jsf page: 这是我的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>

Without Jquery it works perfectly. 没有Jquery,它可以完美地工作。

I replace <a4j:repeat> by <ui:repeat> and it works good.So my code looks like: 我用<a4j:repeat> <ui:repeat>替换了<a4j:repeat> ,它运行良好。所以我的代码看起来像:

<!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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM