为什么分页数据表 JQuery 不适用于 JSF ui:repeat？

Question

我正在 JSF 页面中处理数据表 JQuery，但问题是尽管显示了分页，但它仍无法正常工作。

这是我的页面：

<!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-Page</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" />
    <link rel="stylesheet" type="text/css" href="../css/header.css" />
    <link rel="stylesheet" type="text/css" href="../css/style_combo.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": true,
    "bProcessing" : false,
    "bJQueryUI" : true,
    "sEmptyTable" : "No messages found",
    });
 } );
</script>
</h:head>
<h:body class="dt-example">
    <h:form>
            <table id="example" class="display compact" cellspacing="0"
                width="100%">
                <ui:repeat var="ee" value="#{controller.address}"
                    varStatus="row">
                    <thead>
                        <tr>
                            <ui:repeat value="#{ee.entrySet().toArray()}" var="entete1">
                                <th><h:outputLabel value="#{entete1.key}"
                                        rendered="#{row.index == 0}" /></th>
                            </ui:repeat>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <ui:repeat value="#{ee.entrySet().toArray()}" var="entete">
                                <td><h:outputLabel value="#{entete.value}" /></td>
                            </ui:repeat>
                        </tr>
                    </tbody>
                </ui:repeat>
            </table>
    </h:form>
</h:body>
</ui:composition>

只要 bPaginate 为真，我相信分页必须毫无问题地工作，除了我的页面不是这种情况。有什么想法吗？

注意：我知道 jsf 和 richfaces 中有数据表和扩展表，但我必须使用上面的代码。

Answer 1

经过长时间的分析，我发现 and 不必在循环内，而且列数必须与 header.

中的列数相同

css 和 js 文件总是一样的，我只是更改了 <h:form></h:form>

的内容

下面是运行良好的示例：

<h:form>
        <table id="example" class="cell-border" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <ui:repeat value="#{mycontroler.listOfHead}" var="head">
                        <th><h:outputLabel value="#{head}" /></th>
                    </ui:repeat>
                </tr>
            </thead>
            <tbody>
                <ui:repeat var="details" value="#{mycontroler.ExampleLits}"
                    varStatus="rowStatus">
                    <tr>
                        <ui:repeat value="#{details.entrySet().toArray()}" var="details2">
                            <td><h:outputLabel value="#{details2.value}">
                                </h:outputLabel></td>
                        </ui:repeat>
                    </tr>
                </ui:repeat>
            </tbody>
        </table>
</h:form>

为什么分页数据表 JQuery 不适用于 JSF ui:repeat？

Why the pagination datatables JQuery doesn't work with JSF ui:repeat?

javascript

jquery

jsf

jquery-datatables

uirepeat